diff --git a/files/en-us/web/api/uievent/detail/index.md b/files/en-us/web/api/uievent/detail/index.md
index ccfe28e91ccd3f5..3380d22b14c1ea6 100644
--- a/files/en-us/web/api/uievent/detail/index.md
+++ b/files/en-us/web/api/uievent/detail/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.detail
+title: "UIEvent: detail property"
+short-title: detail
slug: Web/API/UIEvent/detail
page-type: web-api-instance-property
browser-compat: api.UIEvent.detail
diff --git a/files/en-us/web/api/uievent/inituievent/index.md b/files/en-us/web/api/uievent/inituievent/index.md
index dcde13abdba488e..1f548b185aafec3 100644
--- a/files/en-us/web/api/uievent/inituievent/index.md
+++ b/files/en-us/web/api/uievent/inituievent/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.initUIEvent()
+title: "UIEvent: initUIEvent() method"
+short-title: initUIEvent()
slug: Web/API/UIEvent/initUIEvent
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/uievent/sourcecapabilities/index.md b/files/en-us/web/api/uievent/sourcecapabilities/index.md
index 88ad89ca770d435..8a8063ffafde527 100644
--- a/files/en-us/web/api/uievent/sourcecapabilities/index.md
+++ b/files/en-us/web/api/uievent/sourcecapabilities/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.sourceCapabilities
+title: "UIEvent: sourceCapabilities property"
+short-title: sourceCapabilities
slug: Web/API/UIEvent/sourceCapabilities
page-type: web-api-instance-property
status:
@@ -7,9 +8,9 @@ status:
browser-compat: api.UIEvent.sourceCapabilities
---
-{{APIRef("UI Events")}}{{SeeCompatTable}}
+{{APIRef("Input Device Capabilities API")}}{{SeeCompatTable}}
-The **`UIEvent.sourceCapabilities`** read-only property returns
+The **`sourceCapabilities`** read-only property of the {{domxref("UIEvent")}} interface returns
an instance of the {{domxref('InputDeviceCapabilities')}} interface which provides
information about the physical device responsible for generating a touch event. If no
input device was responsible for the event, it returns `null`.
diff --git a/files/en-us/web/api/uievent/uievent/index.md b/files/en-us/web/api/uievent/uievent/index.md
index b76aa71a03b898d..72fac67feb5b465 100644
--- a/files/en-us/web/api/uievent/uievent/index.md
+++ b/files/en-us/web/api/uievent/uievent/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent()
+title: "UIEvent: UIEvent() constructor"
+short-title: UIEvent()
slug: Web/API/UIEvent/UIEvent
page-type: web-api-constructor
browser-compat: api.UIEvent.UIEvent
diff --git a/files/en-us/web/api/uievent/view/index.md b/files/en-us/web/api/uievent/view/index.md
index 7db98176cb8c770..3a992e93de264a1 100644
--- a/files/en-us/web/api/uievent/view/index.md
+++ b/files/en-us/web/api/uievent/view/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.view
+title: "UIEvent: view property"
+short-title: view
slug: Web/API/UIEvent/view
page-type: web-api-instance-property
browser-compat: api.UIEvent.view
diff --git a/files/en-us/web/api/uievent/which/index.md b/files/en-us/web/api/uievent/which/index.md
index 6fea5f8bb100150..4d8f2c575d0556a 100644
--- a/files/en-us/web/api/uievent/which/index.md
+++ b/files/en-us/web/api/uievent/which/index.md
@@ -1,5 +1,6 @@
---
-title: UIEvent.which
+title: "UIEvent: which property"
+short-title: which
slug: Web/API/UIEvent/which
page-type: web-api-instance-property
status:
@@ -48,7 +49,7 @@ In this case, the values are read from right to left.
`keyCode property: ${evt.keyCode}\n` +
`which property: ${evt.which}\n` +
`charCode property: ${evt.charCode}\n` +
- `Character Key Pressed: ${String.fromCharCode(evt.charCode)}\n`
+ `Character Key Pressed: ${String.fromCharCode(evt.charCode)}\n`,
);
}
@@ -56,7 +57,7 @@ In this case, the values are read from right to left.
alert(
`onkeydown handler:\n` +
`keyCode property: ${evt.keyCode}\n` +
- `which property: ${evt.which}\n`
+ `which property: ${evt.which}\n`,
);
}
diff --git a/files/en-us/web/api/url/canparse_static/index.md b/files/en-us/web/api/url/canparse_static/index.md
new file mode 100644
index 000000000000000..103dfc807c6ab5b
--- /dev/null
+++ b/files/en-us/web/api/url/canparse_static/index.md
@@ -0,0 +1,110 @@
+---
+title: "URL: canParse() static method"
+short-title: canParse()
+slug: Web/API/URL/canParse_static
+page-type: web-api-static-method
+browser-compat: api.URL.canParse_static
+---
+
+{{ApiRef("URL API")}}
+
+The **`URL.canParse()`** static method of the {{domxref("URL")}} interface returns a boolean indicating whether or not an absolute URL, or a relative URL combined with a base URL, are parsable and valid.
+
+This is a fast and easy alternative to constructing a `URL` within a [try...catch](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block.
+It returns `true` for the same values for which the [`URL()` constructor](/en-US/docs/Web/API/URL/URL) would succeed, and `false` for the values that would cause the constructor to throw.
+
+## Syntax
+
+```js-nolint
+URL.canParse(url)
+URL.canParse(url, base)
+```
+
+### Parameters
+
+- `url`
+ - : A string or any other object with a {{Glossary("stringifier")}} — including, for example, an {{htmlelement("a")}} or {{htmlelement("area")}} element — that represents an absolute or relative URL.
+ If `url` is a relative URL, `base` is required, and will be used as the base URL.
+ If `url` is an absolute URL, a given `base` will be ignored.
+- `base` {{optional_inline}}
+ - : A string representing the base URL to use in cases where `url` is a relative URL.
+ If not specified, it defaults to `undefined`.
+
+> **Note:** The `url` and `base` arguments will each be stringified from whatever value you pass, just like with other Web APIs that accept a string.
+> In particular, you can use an existing {{domxref("URL")}} object for either argument, and it will be stringified to the object's {{domxref("URL.href", "href")}} property.
+
+### Return value
+
+`true` if the URL can be parsed and is valid; `false` otherwise.
+
+## Examples
+
+This live example demonstrates how to use the `URL.canParse()` static method for a few different absolute and relative URL values.
+
+The first part of the example defines an HTML `` element to log to, along with a logging method `log()`.
+
+```html
+
+```
+
+```js
+const logElement = document.getElementById("log");
+function log(text) {
+ logElement.innerText += `${text}\n`;
+}
+```
+
+Next we check that the `URL.canParse()` method is supported using the condition `"canParse" in URL`.
+If the method is supported we log the result of checking an absolute URL, a relative URL with no base URL, and a relative URL with a valid base URL.
+We also log the case when `URL.canParse()` is not supported.
+
+```js
+if ("canParse" in URL) {
+ log("Test valid absolute URL");
+ let url = "https://developer.mozilla.org/";
+ let result = URL.canParse(url);
+ log(` URL.canParse("${url}"): ${result}`);
+
+ log("\nTest relative URL with no base URL");
+ url = "/en-US/docs";
+ result = URL.canParse(url);
+ log(` URL.canParse("${url}"): ${result}`);
+
+ log("\nTest relative URL with valid base URL");
+ let baseUrl = "https://developer.mozilla.org/";
+ result = URL.canParse(url, baseUrl);
+ log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
+} else {
+ log("URL.canParse() not supported");
+}
+```
+
+Last of all, the code below shows that the `baseUrl` doesn't have to be a string.
+Here we have passed a `URL` object.
+
+```js
+if ("canParse" in URL) {
+ log("\nTest relative URL with base URL supplied as a URL object");
+ let baseUrl = new URL("https://developer.mozilla.org/");
+ let url = "/en-US/docs";
+ result = URL.canParse(url, baseUrl);
+ log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
+}
+```
+
+The results of each of the checks are shown below.
+
+{{EmbedLiveSample('Examples', '100%', '200')}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("URL.URL", "URL()")}}
+- [A polyfill of `URL.canParse()`](https://github.com/zloirock/core-js#url-and-urlsearchparams) is available in [`core-js`](https://github.com/zloirock/core-js)
diff --git a/files/en-us/web/api/url/createobjecturl/index.md b/files/en-us/web/api/url/createobjecturl/index.md
deleted file mode 100644
index 6e0793c381c206d..000000000000000
--- a/files/en-us/web/api/url/createobjecturl/index.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: URL.createObjectURL()
-slug: Web/API/URL/createObjectURL
-page-type: web-api-static-method
-browser-compat: api.URL.createObjectURL
----
-
-{{APIRef("URL API")}}
-
-The **`URL.createObjectURL()`** static
-method creates a string containing a URL representing the object
-given in the parameter.
-
-The URL lifetime is tied to the {{domxref("document")}}
-in the window on which it was created. The new object URL represents the specified
-{{domxref("File")}} object or {{domxref("Blob")}} object.
-
-To release an object URL, call {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}.
-
-{{AvailableInWorkers}}
-
-> **Note:** This feature is _not_ available in [Service Workers](/en-US/docs/Web/API/Service_Worker_API) due to its
-> potential to create memory leaks.
-
-## Syntax
-
-```js-nolint
-createObjectURL(object)
-```
-
-### Parameters
-
-- `object`
- - : A {{domxref("File")}}, {{domxref("Blob")}}, or {{domxref("MediaSource")}} object to
- create an object URL for.
-
-### Return value
-
-A string containing an object URL that can be used to reference the
-contents of the specified source `object`.
-
-## Examples
-
-See [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images).
-
-## Usage notes
-
-### Memory management
-
-Each time you call `createObjectURL()`, a new object URL is created, even if
-you've already created one for the same object. Each of these must be released by
-calling {{domxref("URL.revokeObjectURL()")}} when you no longer need them.
-
-Browsers will release object URLs automatically when the document is unloaded; however,
-for optimal performance and memory usage, if there are safe times when you can
-explicitly unload them, you should do so.
-
-### Using object URLs for media streams
-
-In older versions of the Media Source specification, attaching a stream to a
-{{HTMLElement("video")}} element required creating an object URL for the
-{{domxref("MediaStream")}}. This is no longer necessary, and browsers are removing
-support for doing this.
-
-> **Warning:** If you still have code that relies on
-> {{domxref("URL.createObjectURL", "createObjectURL()")}} to attach streams to media
-> elements, you need to update your code to set {{domxref("HTMLMediaElement.srcObject", "srcObject")}} to the `MediaStream` directly.
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
-- [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
-- {{domxref("URL.revokeObjectURL()")}}
-- {{domxref("HTMLMediaElement.srcObject")}}
-- {{domxref("FileReader.readAsDataURL()")}}
diff --git a/files/en-us/web/api/url/createobjecturl_static/index.md b/files/en-us/web/api/url/createobjecturl_static/index.md
new file mode 100644
index 000000000000000..a1939c7d0cc0eec
--- /dev/null
+++ b/files/en-us/web/api/url/createobjecturl_static/index.md
@@ -0,0 +1,84 @@
+---
+title: "URL: createObjectURL() static method"
+short-title: createObjectURL()
+slug: Web/API/URL/createObjectURL_static
+page-type: web-api-static-method
+browser-compat: api.URL.createObjectURL_static
+---
+
+{{APIRef("File API")}}
+
+The **`URL.createObjectURL()`** static
+method creates a string containing a URL representing the object
+given in the parameter.
+
+The URL lifetime is tied to the {{domxref("document")}}
+in the window on which it was created. The new object URL represents the specified
+{{domxref("File")}} object or {{domxref("Blob")}} object.
+
+To release an object URL, call {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}}.
+
+{{AvailableInWorkers("notservice")}}
+
+> **Note:** This feature is _not_ available in [Service Workers](/en-US/docs/Web/API/Service_Worker_API) due to its
+> potential to create memory leaks.
+
+## Syntax
+
+```js-nolint
+URL.createObjectURL(object)
+```
+
+### Parameters
+
+- `object`
+ - : A {{domxref("File")}}, {{domxref("Blob")}}, or {{domxref("MediaSource")}} object to
+ create an object URL for.
+
+### Return value
+
+A string containing an object URL that can be used to reference the
+contents of the specified source `object`.
+
+## Examples
+
+See [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images).
+
+## Usage notes
+
+### Memory management
+
+Each time you call `createObjectURL()`, a new object URL is created, even if
+you've already created one for the same object. Each of these must be released by
+calling {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}} when you no longer need them.
+
+Browsers will release object URLs automatically when the document is unloaded; however,
+for optimal performance and memory usage, if there are safe times when you can
+explicitly unload them, you should do so.
+
+### Using object URLs for media streams
+
+In older versions of the Media Source specification, attaching a stream to a
+{{HTMLElement("video")}} element required creating an object URL for the
+{{domxref("MediaStream")}}. This is no longer necessary, and browsers are removing
+support for doing this.
+
+> **Warning:** If you still have code that relies on
+> {{domxref("URL.createObjectURL_static", "createObjectURL()")}} to attach streams to media
+> elements, you need to update your code to set {{domxref("HTMLMediaElement.srcObject", "srcObject")}} to the `MediaStream` directly.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
+- {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}}
+- {{domxref("HTMLMediaElement.srcObject")}}
+- {{domxref("FileReader.readAsDataURL()")}}
diff --git a/files/en-us/web/api/url/hash/index.md b/files/en-us/web/api/url/hash/index.md
index 1dd3807a3a0d6fe..b33737fba6a64b8 100644
--- a/files/en-us/web/api/url/hash/index.md
+++ b/files/en-us/web/api/url/hash/index.md
@@ -1,5 +1,6 @@
---
-title: URL.hash
+title: "URL: hash property"
+short-title: hash
slug: Web/API/URL/hash
page-type: web-api-instance-property
browser-compat: api.URL.hash
@@ -24,7 +25,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples",
);
console.log(url.hash); // Logs: '#Examples'
```
diff --git a/files/en-us/web/api/url/host/index.md b/files/en-us/web/api/url/host/index.md
index 002536e0068bea4..86a7cb1503f7b9c 100644
--- a/files/en-us/web/api/url/host/index.md
+++ b/files/en-us/web/api/url/host/index.md
@@ -1,5 +1,6 @@
---
-title: URL.host
+title: "URL: host property"
+short-title: host
slug: Web/API/URL/host
page-type: web-api-instance-property
browser-compat: api.URL.host
diff --git a/files/en-us/web/api/url/hostname/index.md b/files/en-us/web/api/url/hostname/index.md
index 3750bea4423181f..2802a99030f30a0 100644
--- a/files/en-us/web/api/url/hostname/index.md
+++ b/files/en-us/web/api/url/hostname/index.md
@@ -1,5 +1,6 @@
---
-title: URL.hostname
+title: "URL: hostname property"
+short-title: hostname
slug: Web/API/URL/hostname
page-type: web-api-instance-property
browser-compat: api.URL.hostname
@@ -20,7 +21,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname",
);
console.log(url.hostname); // Logs: 'developer.mozilla.org'
```
diff --git a/files/en-us/web/api/url/href/index.md b/files/en-us/web/api/url/href/index.md
index 79884ace2670785..8a01955b08ec45a 100644
--- a/files/en-us/web/api/url/href/index.md
+++ b/files/en-us/web/api/url/href/index.md
@@ -1,5 +1,6 @@
---
-title: URL.href
+title: "URL: href property"
+short-title: href
slug: Web/API/URL/href
page-type: web-api-instance-property
browser-compat: api.URL.href
@@ -20,7 +21,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/href"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/href",
);
console.log(url.href); // Logs: 'https://developer.mozilla.org/en-US/docs/Web/API/URL/href'
```
diff --git a/files/en-us/web/api/url/index.md b/files/en-us/web/api/url/index.md
index b73e65a473c7c6d..dbe94067aab2959 100644
--- a/files/en-us/web/api/url/index.md
+++ b/files/en-us/web/api/url/index.md
@@ -49,10 +49,12 @@ If a browser doesn't yet support the {{domxref("URL.URL", "URL()")}} constructor
## Static methods
-- {{domxref("URL.createObjectURL", "createObjectURL()")}}
+- {{domxref("URL.canParse_static", "canParse()")}}
+ - : Returns a boolean indicating whether or not a URL defined from a URL string and optional base URL string is parsable and valid.
+- {{domxref("URL.createObjectURL_static", "createObjectURL()")}}
- : Returns a string containing a unique blob URL, that is a URL with `blob:` as its scheme, followed by an opaque string uniquely identifying the object in the browser.
-- {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}
- - : Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.
+- {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}}
+ - : Revokes an object URL previously created using {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}.
## Instance methods
@@ -71,6 +73,19 @@ console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
```
+The constructor will raise an exception if the URL cannot be parsed to a valid URL.
+You can either call the above code in a [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block or use the {{domxref("URL.canParse_static", "canParse()")}} static method to first check the URL is valid:
+
+```js
+if (URL.canParse("../cats", "http://www.example.com/dogs")) {
+ const url = new URL("../cats", "http://www.example.com/dogs");
+ console.log(url.hostname); // "www.example.com"
+ console.log(url.pathname); // "/cats"
+} else {
+ console.log("Invalid URL"); //Invalid URL
+}
+```
+
URL properties can be set to construct the URL:
```js
@@ -99,7 +114,7 @@ The {{domxref("URL.toString", "toString()")}} method of `URL` just returns the v
```js
const response = await fetch(
- new URL("http://www.example.com/démonstration.html")
+ new URL("http://www.example.com/démonstration.html"),
);
```
diff --git a/files/en-us/web/api/url/origin/index.md b/files/en-us/web/api/url/origin/index.md
index b6bdcb6f17ce128..bd4aeab5e56c953 100644
--- a/files/en-us/web/api/url/origin/index.md
+++ b/files/en-us/web/api/url/origin/index.md
@@ -1,5 +1,6 @@
---
-title: URL.origin
+title: "URL: origin property"
+short-title: origin
slug: Web/API/URL/origin
page-type: web-api-instance-property
browser-compat: api.URL.origin
diff --git a/files/en-us/web/api/url/password/index.md b/files/en-us/web/api/url/password/index.md
index 000e5829772cc6b..51a74702525d141 100644
--- a/files/en-us/web/api/url/password/index.md
+++ b/files/en-us/web/api/url/password/index.md
@@ -1,5 +1,6 @@
---
-title: URL.password
+title: "URL: password property"
+short-title: password
slug: Web/API/URL/password
page-type: web-api-instance-property
browser-compat: api.URL.password
@@ -23,7 +24,7 @@ A string.
```js
const url = new URL(
- "https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password"
+ "https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password",
);
console.log(url.password); // Logs "flabada"
```
diff --git a/files/en-us/web/api/url/pathname/index.md b/files/en-us/web/api/url/pathname/index.md
index 982f68cdd855f7b..095e229a00afa65 100644
--- a/files/en-us/web/api/url/pathname/index.md
+++ b/files/en-us/web/api/url/pathname/index.md
@@ -1,5 +1,6 @@
---
-title: URL.pathname
+title: "URL: pathname property"
+short-title: pathname
slug: Web/API/URL/pathname
page-type: web-api-instance-property
browser-compat: api.URL.pathname
@@ -27,7 +28,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname?q=value"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname?q=value",
);
console.log(url.pathname); // Logs "/en-US/docs/Web/API/URL/pathname"
```
diff --git a/files/en-us/web/api/url/port/index.md b/files/en-us/web/api/url/port/index.md
index a0cdf129c136ab0..683be87124024c9 100644
--- a/files/en-us/web/api/url/port/index.md
+++ b/files/en-us/web/api/url/port/index.md
@@ -1,5 +1,6 @@
---
-title: URL.port
+title: "URL: port property"
+short-title: port
slug: Web/API/URL/port
page-type: web-api-instance-property
browser-compat: api.URL.port
@@ -21,8 +22,22 @@ A string.
## Examples
```js
-const url = new URL("https://example.com:80/svn/Repos/");
-console.log(url.port); // Logs '80'
+// https protocol with non-default port number
+new URL("https://example.com:5443/svn/Repos/").port; // '5443'
+// http protocol with non-default port number
+new URL("http://example.com:8080/svn/Repos/").port; // '8080'
+// https protocol with default port number
+new URL("https://example.com:443/svn/Repos/").port; // '' (empty string)
+// http protocol with default port number
+new URL("http://example.com:80/svn/Repos/").port; // '' (empty string)
+// https protocol with no explicit port number
+new URL("https://example.com/svn/Repos/").port; // '' (empty string)
+// http protocol with no explicit port number
+new URL("https://example.com/svn/Repos/").port; // '' (empty string)
+// ftp protocol with non-default port number
+new URL("ftp://example.com:221/svn/Repos/").port; // '221'
+// ftp protocol with default port number
+new URL("ftp://example.com:21/svn/Repos/").port; // '' (empty string)
```
## Specifications
diff --git a/files/en-us/web/api/url/protocol/index.md b/files/en-us/web/api/url/protocol/index.md
index d5e58baca53200b..58e9f07c4e0e4ba 100644
--- a/files/en-us/web/api/url/protocol/index.md
+++ b/files/en-us/web/api/url/protocol/index.md
@@ -1,5 +1,6 @@
---
-title: URL.protocol
+title: "URL: protocol property"
+short-title: protocol
slug: Web/API/URL/protocol
page-type: web-api-instance-property
browser-compat: api.URL.protocol
@@ -21,7 +22,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol",
);
console.log(url.protocol); // Logs "https:"
```
diff --git a/files/en-us/web/api/url/revokeobjecturl/index.md b/files/en-us/web/api/url/revokeobjecturl/index.md
deleted file mode 100644
index aad2a496305c823..000000000000000
--- a/files/en-us/web/api/url/revokeobjecturl/index.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: URL.revokeObjectURL()
-slug: Web/API/URL/revokeObjectURL
-page-type: web-api-static-method
-browser-compat: api.URL.revokeObjectURL
----
-
-{{ApiRef("URL API")}}
-
-The **`URL.revokeObjectURL()`** static
-method releases an existing object URL which was previously created by calling
-{{domxref("URL.createObjectURL()") }}.
-
-Call this method when you've finished
-using an object URL to let the browser know not to keep the reference to the file any
-longer.
-
-{{AvailableInWorkers}}
-
-> **Note:** This method is not available from service workers, due to
-> issues with the {{domxref("Blob")}} interface's life cycle and the potential for
-> leaks.
-
-## Syntax
-
-```js-nolint
-revokeObjectURL(objectURL)
-```
-
-### Parameters
-
-- `objectURL`
- - : A string representing an object URL that was previously created by
- calling {{domxref("URL.createObjectURL", "createObjectURL()") }}.
-
-### Return value
-
-None ({{jsxref("undefined")}}).
-
-## Examples
-
-See [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images).
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
-- [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
-- {{domxref("URL.createObjectURL()") }}
diff --git a/files/en-us/web/api/url/revokeobjecturl_static/index.md b/files/en-us/web/api/url/revokeobjecturl_static/index.md
new file mode 100644
index 000000000000000..2f3a7788d074b17
--- /dev/null
+++ b/files/en-us/web/api/url/revokeobjecturl_static/index.md
@@ -0,0 +1,56 @@
+---
+title: "URL: revokeObjectURL() static method"
+short-title: revokeObjectURL()
+slug: Web/API/URL/revokeObjectURL_static
+page-type: web-api-static-method
+browser-compat: api.URL.revokeObjectURL_static
+---
+
+{{ApiRef("File API")}}
+
+The **`URL.revokeObjectURL()`** static
+method releases an existing object URL which was previously created by calling
+{{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}.
+
+Call this method when you've finished
+using an object URL to let the browser know not to keep the reference to the file any
+longer.
+
+{{AvailableInWorkers("notservice")}}
+
+> **Note:** This method is _not_ available in [Service Workers](/en-US/docs/Web/API/Service_Worker_API), due to
+> issues with the {{domxref("Blob")}} interface's life cycle and the potential for leaks.
+
+## Syntax
+
+```js-nolint
+URL.revokeObjectURL(objectURL)
+```
+
+### Parameters
+
+- `objectURL`
+ - : A string representing an object URL that was previously created by
+ calling {{domxref("URL.createObjectURL_static", "createObjectURL()")}}.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+See [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [Using object URLs to display images](/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
+- {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}
diff --git a/files/en-us/web/api/url/search/index.md b/files/en-us/web/api/url/search/index.md
index e9a41b8d7954103..5076ed6f5702fbc 100644
--- a/files/en-us/web/api/url/search/index.md
+++ b/files/en-us/web/api/url/search/index.md
@@ -1,5 +1,6 @@
---
-title: URL.search
+title: "URL: search property"
+short-title: search
slug: Web/API/URL/search
page-type: web-api-instance-property
browser-compat: api.URL.search
@@ -25,7 +26,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123",
);
console.log(url.search); // Logs "?q=123"
```
diff --git a/files/en-us/web/api/url/searchparams/index.md b/files/en-us/web/api/url/searchparams/index.md
index 00a35a2f8e113da..74cf8d00c249d3c 100644
--- a/files/en-us/web/api/url/searchparams/index.md
+++ b/files/en-us/web/api/url/searchparams/index.md
@@ -1,5 +1,6 @@
---
-title: URL.searchParams
+title: "URL: searchParams property"
+short-title: searchParams
slug: Web/API/URL/searchParams
page-type: web-api-instance-property
browser-compat: api.URL.searchParams
@@ -7,7 +8,7 @@ browser-compat: api.URL.searchParams
{{APIRef("URL API")}}
-The **`searchParams`** readonly property of the
+The **`searchParams`** read-only property of the
{{domxref("URL")}} interface returns a {{domxref("URLSearchParams")}} object allowing
access to the {{httpmethod("GET")}} decoded query arguments contained in the URL.
diff --git a/files/en-us/web/api/url/tojson/index.md b/files/en-us/web/api/url/tojson/index.md
index b8350a5113dc9cd..86f747ed42b001f 100644
--- a/files/en-us/web/api/url/tojson/index.md
+++ b/files/en-us/web/api/url/tojson/index.md
@@ -1,5 +1,6 @@
---
-title: URL.toJSON()
+title: "URL: toJSON() method"
+short-title: toJSON()
slug: Web/API/URL/toJSON
page-type: web-api-instance-method
browser-compat: api.URL.toJSON
@@ -32,7 +33,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/toString",
);
url.toJSON(); // should return the URL as a string
```
diff --git a/files/en-us/web/api/url/tostring/index.md b/files/en-us/web/api/url/tostring/index.md
index d5c249e005df09f..91eeffddfc219f9 100644
--- a/files/en-us/web/api/url/tostring/index.md
+++ b/files/en-us/web/api/url/tostring/index.md
@@ -1,5 +1,6 @@
---
-title: URL.toString()
+title: "URL: toString() method"
+short-title: toString()
slug: Web/API/URL/toString
page-type: web-api-instance-method
browser-compat: api.URL.toString
@@ -7,7 +8,7 @@ browser-compat: api.URL.toString
{{ApiRef("URL API")}}
-The **`URL.toString()`** {{Glossary("stringifier")}} method returns a
+The **`toString()`** method of the {{domxref("URL")}} interface returns a
string containing the whole URL. It is effectively a read-only version
of {{domxref("URL.href")}}.
@@ -31,7 +32,7 @@ A string.
```js
const url = new URL(
- "https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"
+ "https://developer.mozilla.org/en-US/docs/Web/API/URL/toString",
);
url.toString(); // should return the URL as a string
```
diff --git a/files/en-us/web/api/url/url/index.md b/files/en-us/web/api/url/url/index.md
index e9383fc3a5ffbc6..d9e6631c2b313eb 100644
--- a/files/en-us/web/api/url/url/index.md
+++ b/files/en-us/web/api/url/url/index.md
@@ -1,5 +1,6 @@
---
-title: URL()
+title: "URL: URL() constructor"
+short-title: URL()
slug: Web/API/URL/URL
page-type: web-api-constructor
browser-compat: api.URL.URL
diff --git a/files/en-us/web/api/url/username/index.md b/files/en-us/web/api/url/username/index.md
index fee71001019f0a9..b424796482bc69a 100644
--- a/files/en-us/web/api/url/username/index.md
+++ b/files/en-us/web/api/url/username/index.md
@@ -1,5 +1,6 @@
---
-title: URL.username
+title: "URL: username property"
+short-title: username
slug: Web/API/URL/username
page-type: web-api-instance-property
browser-compat: api.URL.username
@@ -20,7 +21,7 @@ A string.
```js
const url = new URL(
- "https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/username"
+ "https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/username",
);
console.log(url.username); // Logs "anonymous"
```
diff --git a/files/en-us/web/api/url_api/index.md b/files/en-us/web/api/url_api/index.md
index 639479abce60391..3d64a4fa62164c3 100644
--- a/files/en-us/web/api/url_api/index.md
+++ b/files/en-us/web/api/url_api/index.md
@@ -2,7 +2,10 @@
title: URL API
slug: Web/API/URL_API
page-type: web-api-overview
-browser-compat: api.URL
+browser-compat:
+ - api.URL
+ - api.URLSearchParams
+spec-urls: https://url.spec.whatwg.org/#api
---
{{DefaultAPISidebar("URL API")}}
@@ -11,7 +14,7 @@ The URL API is a component of the URL standard, which defines what constitutes a
{{AvailableInWorkers}}
-## URL concepts and usage
+## Concepts and usage
The majority of the URL standard is taken up by the [definition of a URL](/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) and how it is structured and parsed. Also covered are definitions of various terms related to addressing of computers on a network, and the algorithms for parsing IP addresses and DOM addresses are specified. More interesting to most developers is the API itself.
@@ -37,7 +40,7 @@ let addr = new URL("https://example.com/login");
addr.username = myUsername;
```
-Setting the value of {{domxref("URL.username", "username")}} not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by {{domxref("URL.href", "addr.href")}} is `https://someguy@example.com/login`. This is true for any of the writable properties.
+Setting the value of {{domxref("URL.username", "username")}} not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by {{domxref("URL.href", "href")}} is `https://someguy@example.com/login`. This is true for any of the writable properties.
### Queries
@@ -57,12 +60,14 @@ For example, in the above snippet, the username and target page are taken from t
Other functions within `URLSearchParams` let you change the value of keys, add and delete keys and their values, and even sort the list of parameters.
-## URL API interfaces
+## Interfaces
The URL API is a simple one, with only a couple of interfaces to its name:
-- [`URL`](/en-US/docs/Web/API/URL)
-- [`URLSearchParams`](/en-US/docs/Web/API/URLSearchParams)
+- {{domxref("URL")}}
+ - : Can be used to parse, construct, normalize, and encode {{glossary("URL", "URLs")}}.
+- {{domxref("URLSearchParams")}}
+ - : Defines utility methods to work with the query string of a URL.
## Examples
@@ -102,7 +107,7 @@ A working version of this example can be [found on Glitch](https://url-api.glitc
## See also
-- [Fetch API](/en-US/docs/Web/API/Fetch_API)
+- {{domxref("Fetch API", "", "", "nocode")}}
- CSS {{cssxref("<url>")}} type
- {{jsxref("encodeURI", "encodeURI()")}}
- {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
diff --git a/files/en-us/web/api/url_pattern_api/index.md b/files/en-us/web/api/url_pattern_api/index.md
index 7abcbc1f5769670..79e150d43003bc2 100644
--- a/files/en-us/web/api/url_pattern_api/index.md
+++ b/files/en-us/web/api/url_pattern_api/index.md
@@ -5,15 +5,18 @@ page-type: web-api-overview
status:
- experimental
browser-compat: api.URLPattern
+spec-urls: https://urlpattern.spec.whatwg.org/
---
{{DefaultAPISidebar("URL Pattern API")}}{{SeeCompatTable}}
-The URL Pattern API defines a syntax that is used to create URL pattern
+The **URL Pattern API** defines a syntax that is used to create URL pattern
matchers. These patterns can be matched against URLs or individual URL
components. The URL Pattern API is used by the {{domxref("URLPattern")}}
interface.
+{{AvailableInWorkers}}
+
## Concepts and usage
The pattern syntax is based on the syntax from the
@@ -31,11 +34,12 @@ can contain:
You can find details about the syntax in the [pattern syntax](#pattern_syntax)
section below.
-## URL Pattern API interfaces
+## Interfaces
The URL Pattern API only has a single related interface:
- {{domxref("URLPattern")}} {{Experimental_Inline}}
+ - : Represents a pattern that can match URLs or parts of URLs. The pattern can contain capturing groups that extract parts of the matched URL.
## Pattern syntax
@@ -430,12 +434,12 @@ console.log(pattern.hash); // ''
// Prints `true`
console.log(
- pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg")
+ pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg"),
);
// Prints `false` because the search component does not match
console.log(
- pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1")
+ pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1"),
);
```
@@ -492,7 +496,7 @@ console.log(
pattern.test({
pathname: "/foo/bar",
baseURL: "https://example.com/baz",
- })
+ }),
);
// Prints `true` as the hostname in the second argument base URL matches.
@@ -723,7 +727,7 @@ const pattern = new URLPattern({
});
const result = pattern.exec(
- "http://foo:bar@sub.example.com/product/view?q=12345"
+ "http://foo:bar@sub.example.com/product/view?q=12345",
);
console.log(result.username.groups.user); // 'foo'
diff --git a/files/en-us/web/api/urlpattern/exec/index.md b/files/en-us/web/api/urlpattern/exec/index.md
index b1dd5086f75c82b..06830f5b3d61ea5 100644
--- a/files/en-us/web/api/urlpattern/exec/index.md
+++ b/files/en-us/web/api/urlpattern/exec/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.exec()
+title: "URLPattern: exec() method"
+short-title: exec()
slug: Web/API/URLPattern/exec
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/urlpattern/hash/index.md b/files/en-us/web/api/urlpattern/hash/index.md
index e16e659da62d8c5..d74e03e3eb08451 100644
--- a/files/en-us/web/api/urlpattern/hash/index.md
+++ b/files/en-us/web/api/urlpattern/hash/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.hash
+title: "URLPattern: hash property"
+short-title: hash
slug: Web/API/URLPattern/hash
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.hash
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`hash`** property of the {{domxref("URLPattern")}} interface is a
+The **`hash`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the fragment part
of a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/hostname/index.md b/files/en-us/web/api/urlpattern/hostname/index.md
index 678b66cde951493..99ebaeb352c27ef 100644
--- a/files/en-us/web/api/urlpattern/hostname/index.md
+++ b/files/en-us/web/api/urlpattern/hostname/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.hostname
+title: "URLPattern: hostname property"
+short-title: hostname
slug: Web/API/URLPattern/hostname
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.hostname
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`hostname`** property of the {{domxref("URLPattern")}} interface is a
+The **`hostname`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the hostname part
of a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/index.md b/files/en-us/web/api/urlpattern/index.md
index b96d548ca5ac489..ca8dc896d672541 100644
--- a/files/en-us/web/api/urlpattern/index.md
+++ b/files/en-us/web/api/urlpattern/index.md
@@ -9,11 +9,10 @@ browser-compat: api.URLPattern
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`URLPattern`** interface matches URLs or parts of URLs against a pattern.
-The pattern can contain capturing groups that extract parts of the matched URL.
+The **`URLPattern`** interface of the {{domxref("URL Pattern API", "", "", "nocode")}} matches URLs or parts of URLs against a pattern. The pattern can contain capturing groups that extract parts of the matched URL.
More information about the syntax of patterns can be found on the API overview
-page: [URL Pattern API](/en-US/docs/Web/API/URL_Pattern_API)
+page: {{domxref("URL Pattern API", "", "", "nocode")}}.
{{AvailableInWorkers}}
@@ -24,28 +23,28 @@ page: [URL Pattern API](/en-US/docs/Web/API/URL_Pattern_API)
## Instance properties
-- {{domxref("URLPattern.hash", "hash")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.hash", "hash")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _hash_ part
of a URL.
-- {{domxref("URLPattern.hostname", "hostname")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.hostname", "hostname")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _hostname_
part of a URL.
-- {{domxref("URLPattern.password", "password")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.password", "password")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _password_
part of a URL.
-- {{domxref("URLPattern.pathname", "pathname")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.pathname", "pathname")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _pathname_
part of a URL.
-- {{domxref("URLPattern.port", "port")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.port", "port")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _port_ part
of a URL.
-- {{domxref("URLPattern.protocol", "protocol")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.protocol", "protocol")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _protocol_
part of a URL.
-- {{domxref("URLPattern.search", "search")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.search", "search")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _search_ part
of a URL.
-- {{domxref("URLPattern.username","username")}} {{Experimental_Inline}}
+- {{domxref("URLPattern.username","username")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A string containing a pattern to match the _username_
part of a URL.
diff --git a/files/en-us/web/api/urlpattern/password/index.md b/files/en-us/web/api/urlpattern/password/index.md
index 03ab6fc6a2904a9..2118f054fb3684d 100644
--- a/files/en-us/web/api/urlpattern/password/index.md
+++ b/files/en-us/web/api/urlpattern/password/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.password
+title: "URLPattern: password property"
+short-title: password
slug: Web/API/URLPattern/password
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.password
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`password`** property of the {{domxref("URLPattern")}} interface is a
+The **`password`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the password part
of a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/pathname/index.md b/files/en-us/web/api/urlpattern/pathname/index.md
index 8cce92016cfebb5..b5f66adbad06373 100644
--- a/files/en-us/web/api/urlpattern/pathname/index.md
+++ b/files/en-us/web/api/urlpattern/pathname/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.pathname
+title: "URLPattern: pathname property"
+short-title: pathname
slug: Web/API/URLPattern/pathname
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.pathname
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`pathname`** property of the {{domxref("URLPattern")}} interface is a
+The **`pathname`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the pathname part
of a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/port/index.md b/files/en-us/web/api/urlpattern/port/index.md
index a26ff17970bc49b..b04da7d4ced1da1 100644
--- a/files/en-us/web/api/urlpattern/port/index.md
+++ b/files/en-us/web/api/urlpattern/port/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.port
+title: "URLPattern: port property"
+short-title: port
slug: Web/API/URLPattern/port
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.port
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`port`** property of the {{domxref("URLPattern")}} interface is a
+The **`port`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the port part of a
URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/protocol/index.md b/files/en-us/web/api/urlpattern/protocol/index.md
index d366e54fcf38722..699c7468cc8fde0 100644
--- a/files/en-us/web/api/urlpattern/protocol/index.md
+++ b/files/en-us/web/api/urlpattern/protocol/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.protocol
+title: "URLPattern: protocol property"
+short-title: protocol
slug: Web/API/URLPattern/protocol
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.protocol
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`protocol`** property of the {{domxref("URLPattern")}} interface is a
+The **`protocol`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the protocol part
of a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/search/index.md b/files/en-us/web/api/urlpattern/search/index.md
index 876001902a90256..f69a944554efdc3 100644
--- a/files/en-us/web/api/urlpattern/search/index.md
+++ b/files/en-us/web/api/urlpattern/search/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.search
+title: "URLPattern: search property"
+short-title: search
slug: Web/API/URLPattern/search
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.search
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`search`** property of the {{domxref("URLPattern")}} interface is a
+The **`search`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the search part of
a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlpattern/test/index.md b/files/en-us/web/api/urlpattern/test/index.md
index d1b1db6e5036d95..5270c1b41566cc4 100644
--- a/files/en-us/web/api/urlpattern/test/index.md
+++ b/files/en-us/web/api/urlpattern/test/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.test()
+title: "URLPattern: test() method"
+short-title: test()
slug: Web/API/URLPattern/test
page-type: web-api-instance-method
status:
@@ -63,21 +64,21 @@ console.log(
pattern.test({
pathname: "/books/123",
baseURL: "http://store.example.com",
- })
+ }),
); // true
console.log(
pattern.test({
protocol: "https",
hostname: "store.example.com",
pathname: "/books/123",
- })
+ }),
); // true
console.log(
pattern.test({
protocol: "file",
hostname: "store.example.com",
pathname: "/books/123",
- })
+ }),
); // false
```
diff --git a/files/en-us/web/api/urlpattern/urlpattern/index.md b/files/en-us/web/api/urlpattern/urlpattern/index.md
index ca4e522f5c9e990..c44f8a6a9cef52d 100644
--- a/files/en-us/web/api/urlpattern/urlpattern/index.md
+++ b/files/en-us/web/api/urlpattern/urlpattern/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern()
+title: "URLPattern: URLPattern() constructor"
+short-title: URLPattern()
slug: Web/API/URLPattern/URLPattern
page-type: web-api-constructor
status:
@@ -44,8 +45,8 @@ new URLPattern(input, baseURL, options)
`input` is a relative pattern. If not specified, it defaults to `undefined`.
- `options` {{Optional_Inline}}
- : An object providing options for matching the given pattern. The possible object members are as follows:
- - `ignoreCase`
- - Enables case-insensitive matching if set to `true`. If omitted or set to `false`, matching will be case-sensitive.
+ - `ignoreCase` {{Optional_Inline}}
+ - : Enables case-insensitive matching if set to `true`. If omitted or set to `false`, matching will be case-sensitive.
### Exceptions
diff --git a/files/en-us/web/api/urlpattern/username/index.md b/files/en-us/web/api/urlpattern/username/index.md
index 3bcbd0b86b1e7cd..559abc00a4cd4f6 100644
--- a/files/en-us/web/api/urlpattern/username/index.md
+++ b/files/en-us/web/api/urlpattern/username/index.md
@@ -1,5 +1,6 @@
---
-title: URLPattern.username
+title: "URLPattern: username property"
+short-title: username
slug: Web/API/URLPattern/username
page-type: web-api-instance-property
status:
@@ -9,7 +10,7 @@ browser-compat: api.URLPattern.username
{{APIRef("URL Pattern API")}}{{SeeCompatTable}}
-The **`username`** property of the {{domxref("URLPattern")}} interface is a
+The **`username`** read-only property of the {{domxref("URLPattern")}} interface is a
string containing the pattern used to match the username part
of a URL. This value may differ from the input to the constructor due to
normalization.
diff --git a/files/en-us/web/api/urlsearchparams/append/index.md b/files/en-us/web/api/urlsearchparams/append/index.md
index 16f536502a03c13..4e371d242aa8994 100644
--- a/files/en-us/web/api/urlsearchparams/append/index.md
+++ b/files/en-us/web/api/urlsearchparams/append/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.append()
+title: "URLSearchParams: append() method"
+short-title: append()
slug: Web/API/URLSearchParams/append
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.append
@@ -13,7 +14,7 @@ interface appends a specified key/value pair as a new search parameter.
As shown in the example below, if the same key is appended multiple times it will
appear in the parameter string multiple times for each value.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
diff --git a/files/en-us/web/api/urlsearchparams/delete/index.md b/files/en-us/web/api/urlsearchparams/delete/index.md
index d48828592629308..851641037171a03 100644
--- a/files/en-us/web/api/urlsearchparams/delete/index.md
+++ b/files/en-us/web/api/urlsearchparams/delete/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.delete()
+title: "URLSearchParams: delete() method"
+short-title: delete()
slug: Web/API/URLSearchParams/delete
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.delete
@@ -7,22 +8,27 @@ browser-compat: api.URLSearchParams.delete
{{ApiRef("URL API")}}
-The **`delete()`** method of the {{domxref("URLSearchParams")}}
-interface deletes the given search parameter and all its associated values, from the
-list of all search parameters.
+The **`delete()`** method of the {{domxref("URLSearchParams")}} interface deletes specified parameters and their associated value(s) from the list of all search parameters.
-{{availableinworkers}}
+A parameter name and optional value are used to match parameters.
+If only a parameter name is specified, then all search parameters that match the name are deleted, along with their associated values.
+If both a parameter name and value are specified, then all search parameters that match both the parameter name and value are deleted.
+
+{{AvailableInWorkers}}
## Syntax
```js-nolint
delete(name)
+delete(name, value)
```
### Parameters
- `name`
- - : The name of the parameter to be deleted.
+ - : The name of the parameters to be deleted.
+- `value` {{optional_inline}}
+ - : The value that parameters must match, along with the given name, to be deleted.
### Return value
@@ -30,14 +36,63 @@ None ({{jsxref("undefined")}}).
## Examples
+### Delete all parameters with specified name
+
+This example shows how to delete all query parameters (and values) that have a particular name.
+
+```html hidden
+
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+ logElement.innerText += `${text}\n`;
+}
+```
+
```js
-let url = new URL("https://example.com?foo=1&bar=2&foo=3");
-let params = new URLSearchParams(url.search);
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
+log(`Query string (before):\t ${params}`);
+params.delete("foo");
+log(`Query string (after):\t ${params}`);
+```
+
+The log below shows that all parameters that have the name of `foo` are deleted.
+
+{{EmbedLiveSample('Delete all parameters with specified name', '100%', '50')}}
+
+### Delete parameters with specified name and value
-// Delete the foo parameter.
-params.delete("foo"); //Query string is now: 'bar=2'
+This example shows how to delete query parameters that match a particular name and value.
+
+```html hidden
+
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+ logElement.innerText += `${text}\n`;
+}
+```
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2&foo=3&foo=1");
+const params = new URLSearchParams(url.search);
+log(`Query string (before):\t ${params}`);
+params.delete("foo", "1");
+log(`Query string (after):\t ${params}`);
```
+All parameters that match both the parameter `name` and `value` should be deleted (there is no reason to specify two parameters with the same name and value as shown above).
+
+{{EmbedLiveSample('Delete parameters with specified name and value', '100%', '50')}}
+
+If your browser supports the `value` option, the "after" string should be `bar=2&foo=3`.
+Otherwise the result will be the same as in the previous example (`bar=2`).
+
## Specifications
{{Specifications}}
@@ -45,3 +100,7 @@ params.delete("foo"); //Query string is now: 'bar=2'
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Polyfill of `URLSearchParams` in `core-js`](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/en-us/web/api/urlsearchparams/entries/index.md b/files/en-us/web/api/urlsearchparams/entries/index.md
index 90bfefc401c0ce3..d2211de4697bbfb 100644
--- a/files/en-us/web/api/urlsearchparams/entries/index.md
+++ b/files/en-us/web/api/urlsearchparams/entries/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.entries()
+title: "URLSearchParams: entries() method"
+short-title: entries()
slug: Web/API/URLSearchParams/entries
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.entries
@@ -13,7 +14,7 @@ The **`entries()`** method of the
pairs contained in this object. The iterator returns key/value pairs in the same order as they appear in the query string. The key and value of each pair are
string objects.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
diff --git a/files/en-us/web/api/urlsearchparams/foreach/index.md b/files/en-us/web/api/urlsearchparams/foreach/index.md
index 45ad391e41d0a28..71def6dcd5c6084 100644
--- a/files/en-us/web/api/urlsearchparams/foreach/index.md
+++ b/files/en-us/web/api/urlsearchparams/foreach/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.forEach()
+title: "URLSearchParams: forEach() method"
+short-title: forEach()
slug: Web/API/URLSearchParams/forEach
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.forEach
@@ -11,7 +12,7 @@ The **`forEach()`** method of the
{{domxref("URLSearchParams")}} interface allows iteration through all values contained
in this object via a callback function.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
@@ -54,7 +55,7 @@ searchParams.forEach((value, key) => {
The result is:
-```
+```plain
value1 key1
value2 key2
```
diff --git a/files/en-us/web/api/urlsearchparams/get/index.md b/files/en-us/web/api/urlsearchparams/get/index.md
index 63c2e55751efb8c..69385ddfedf2ccb 100644
--- a/files/en-us/web/api/urlsearchparams/get/index.md
+++ b/files/en-us/web/api/urlsearchparams/get/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.get()
+title: "URLSearchParams: get() method"
+short-title: get()
slug: Web/API/URLSearchParams/get
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.get
@@ -10,7 +11,7 @@ browser-compat: api.URLSearchParams.get
The **`get()`** method of the {{domxref("URLSearchParams")}}
interface returns the first value associated to the given search parameter.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
diff --git a/files/en-us/web/api/urlsearchparams/getall/index.md b/files/en-us/web/api/urlsearchparams/getall/index.md
index 0a161cff53e6162..e7849ce55c6aa77 100644
--- a/files/en-us/web/api/urlsearchparams/getall/index.md
+++ b/files/en-us/web/api/urlsearchparams/getall/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.getAll()
+title: "URLSearchParams: getAll() method"
+short-title: getAll()
slug: Web/API/URLSearchParams/getAll
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.getAll
@@ -10,7 +11,7 @@ browser-compat: api.URLSearchParams.getAll
The **`getAll()`** method of the {{domxref("URLSearchParams")}}
interface returns all the values associated with a given search parameter as an array.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
@@ -25,7 +26,7 @@ getAll(name)
### Return value
-An array of strings.
+An array of strings, which may be empty if no values for the given parameter are found.
## Examples
diff --git a/files/en-us/web/api/urlsearchparams/has/index.md b/files/en-us/web/api/urlsearchparams/has/index.md
index 1a955c1a2b0340d..8a95919c56d3725 100644
--- a/files/en-us/web/api/urlsearchparams/has/index.md
+++ b/files/en-us/web/api/urlsearchparams/has/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.has()
+title: "URLSearchParams: has() method"
+short-title: has()
slug: Web/API/URLSearchParams/has
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.has
@@ -7,22 +8,27 @@ browser-compat: api.URLSearchParams.has
{{ApiRef("URL API")}}
-The **`has()`** method of the {{domxref("URLSearchParams")}}
-interface returns a boolean value that indicates whether a parameter with the
-specified name exists.
+The **`has()`** method of the {{domxref("URLSearchParams")}} interface returns a boolean value that indicates whether the specified parameter is in the search parameters.
-{{availableinworkers}}
+A parameter name and optional value are used to match parameters.
+If only a parameter name is specified, then the method will return `true` if any parameters in the query string match the name, and `false` otherwise.
+If both a parameter name and value are specified, then the method will return `true` if a parameter matches both the name and value.
+
+{{AvailableInWorkers}}
## Syntax
```js-nolint
has(name)
+has(name, value)
```
### Parameters
- `name`
- - : The name of the parameter to find.
+ - : The name of the parameter to match.
+- `value`
+ - : The value of the parameter, along with the given name, to match.
### Return value
@@ -30,13 +36,66 @@ A boolean value.
## Examples
+### Check for parameter with specified name
+
+This example shows how to check if the query string has any parameters with a particular name.
+
+```html hidden
+
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+ logElement.innerText += `${text}\n`;
+}
+```
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
+
+// has() returns true if the parameter is in the query string
+log(`bar?:\t${params.has("bar")}`);
+log(`bark?:\t${params.has("bark")}`);
+log(`foo?:\t${params.has("foo")}`);
+```
+
+The log below shows whether the parameters `bar`, `bark`, and `foo`, are present in the query string.
+
+{{EmbedLiveSample('Check for parameter with specified name', '100%', '80')}}
+
+### Check for parameter with specified name and value
+
+This example shows how to check whether the query string has a parameter that matches both a particular name and value.
+
+```html hidden
+
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+ logElement.innerText += `${text}\n`;
+}
+```
+
```js
-let url = new URL("https://example.com?foo=1&bar=2");
-let params = new URLSearchParams(url.search);
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
-console.log(params.has("bar")); //true
+// has() returns true if a parameter with the matching name and value is in the query string
+log(`bar=1?:\t${params.has("bar", "1")}`);
+log(`bar=2?:\t${params.has("bar", "2")}`);
+log(`foo=4?:\t${params.has("foo", "4")}`);
```
+Only the second value above should be `true`, as only the parameter name `bar` with value `2` is matched.
+
+{{EmbedLiveSample('Check for parameter with specified name and value', '100%', '80')}}
+
+If your browser does not support the `value` option the method will match on the name, and all the results should be `true`.
+
## Specifications
{{Specifications}}
@@ -44,3 +103,7 @@ console.log(params.has("bar")); //true
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Polyfill of `URLSearchParams` in `core-js`](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/en-us/web/api/urlsearchparams/index.md b/files/en-us/web/api/urlsearchparams/index.md
index c2cb3c1d0639015..89546774879d6c5 100644
--- a/files/en-us/web/api/urlsearchparams/index.md
+++ b/files/en-us/web/api/urlsearchparams/index.md
@@ -18,19 +18,26 @@ for (const [key, value] of mySearchParams.entries()) {
}
```
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Constructor
- {{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
- : Returns a `URLSearchParams` object instance.
+## Instance properties
+
+- {{domxref("URLSearchParams.size", 'size')}} {{ReadOnlyInline}}
+ - : Indicates the total number of search parameter entries.
+
## Instance methods
+- `URLSearchParams.[@@iterator]()`
+ - : Returns an {{jsxref("Iteration_protocols","iterator")}} allowing iteration through all key/value pairs contained in this object in the same order as they appear in the query string.
- {{domxref("URLSearchParams.append()")}}
- : Appends a specified key/value pair as a new search parameter.
- {{domxref("URLSearchParams.delete()")}}
- - : Deletes the given search parameter, and its associated value, from the list of all search parameters.
+ - : Deletes search parameters that match a name, and optional value, from the list of all search parameters.
- {{domxref("URLSearchParams.entries()")}}
- : Returns an {{jsxref("Iteration_protocols","iterator")}} allowing iteration through all key/value pairs contained in this object in the same order as they appear in the query string.
- {{domxref("URLSearchParams.forEach()")}}
@@ -40,7 +47,7 @@ for (const [key, value] of mySearchParams.entries()) {
- {{domxref("URLSearchParams.getAll()")}}
- : Returns all the values associated with a given search parameter.
- {{domxref("URLSearchParams.has()")}}
- - : Returns a boolean value indicating if such a given parameter exists.
+ - : Returns a boolean value indicating if a given parameter, or parameter and value pair, exists.
- {{domxref("URLSearchParams.keys()")}}
- : Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing iteration through all keys of the key/value pairs contained in this object.
- {{domxref("URLSearchParams.set()")}}
@@ -64,6 +71,7 @@ for (const p of searchParams) {
}
console.log(searchParams.has("topic")); // true
+console.log(searchParams.has("topic", "fish")); // false
console.log(searchParams.get("topic") === "api"); // true
console.log(searchParams.getAll("topic")); // ["api"]
console.log(searchParams.get("foo") === null); // true
@@ -122,7 +130,7 @@ console.log(searchParams3.has("query")); // true
### Preserving plus signs
-The `URLSearchParams` constructor interprets plus signs (`+`) as spaces, which might cause problems.
+The `URLSearchParams` constructor interprets plus signs (`+`) as spaces, which might cause problems. In the example below, we use [hexadecimal escape sequences](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#hexadecimal_escape_sequences) to mimic a string containing binary data (where every byte carries information) that needs to be stored in the URL search params. Note how the encoded string produced by `btoa()` contains `+` and isn't preserved by `URLSearchParams`.
```js
const rawData = "\x13à\x17@\x1F\x80";
diff --git a/files/en-us/web/api/urlsearchparams/keys/index.md b/files/en-us/web/api/urlsearchparams/keys/index.md
index bf5fbdb8ec6d47b..53b54216781fbea 100644
--- a/files/en-us/web/api/urlsearchparams/keys/index.md
+++ b/files/en-us/web/api/urlsearchparams/keys/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.keys()
+title: "URLSearchParams: keys() method"
+short-title: keys()
slug: Web/API/URLSearchParams/keys
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.keys
@@ -12,7 +13,7 @@ interface returns an {{jsxref("Iteration_protocols",'iterator')}} allowing itera
through all keys contained in this object. The keys are string
objects.
-> **Note:** This method is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API).
+{{AvailableInWorkers}}
## Syntax
@@ -42,7 +43,7 @@ for (const key of searchParams.keys()) {
The result is:
-```
+```plain
key1
key2
```
diff --git a/files/en-us/web/api/urlsearchparams/set/index.md b/files/en-us/web/api/urlsearchparams/set/index.md
index 7f91d9ff67ba761..5f45c60788c5075 100644
--- a/files/en-us/web/api/urlsearchparams/set/index.md
+++ b/files/en-us/web/api/urlsearchparams/set/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.set()
+title: "URLSearchParams: set() method"
+short-title: set()
slug: Web/API/URLSearchParams/set
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.set
@@ -12,7 +13,7 @@ interface sets the value associated with a given search parameter to the given v
If there were several matching values, this method deletes the others. If the search
parameter doesn't exist, this method creates it.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
diff --git a/files/en-us/web/api/urlsearchparams/size/index.md b/files/en-us/web/api/urlsearchparams/size/index.md
new file mode 100644
index 000000000000000..c05e978be6e6071
--- /dev/null
+++ b/files/en-us/web/api/urlsearchparams/size/index.md
@@ -0,0 +1,59 @@
+---
+title: "URLSearchParams: size property"
+short-title: size
+slug: Web/API/URLSearchParams/size
+page-type: web-api-instance-property
+browser-compat: api.URLSearchParams.size
+---
+
+{{APIRef("URL API")}}
+
+The **`size`** read-only property of the {{domxref("URLSearchParams")}} interface indicates the total number of search parameter entries.
+
+{{AvailableInWorkers}}
+
+## Value
+
+A number indicating the total number of search parameter entries in the {{domxref("URLSearchParams")}} object.
+
+## Examples
+
+### Getting the amount of search parameter entries
+
+You can get the total number of search parameter entries like so:
+
+```js
+const searchParams = new URLSearchParams("c=4&a=2&b=3&a=1");
+searchParams.size; // 4
+```
+
+Note how the `a` parameter is given twice, but `size` returns the number of all given entries (4) and not 3. To get the amount of unique keys, you can use a {{jsxref("Set")}}, for example:
+
+```js
+[...new Set(searchParams.keys())].length; // 3
+```
+
+### Checking if search parameters exist
+
+The `size` property is useful for checking whether there are any search parameters at all:
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2");
+
+if (url.searchParams.size) {
+ console.log("URL has search parameters!");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("URL.searchParams")}}
+- [Polyfill of `URLSearchParams` in `core-js`](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/en-us/web/api/urlsearchparams/sort/index.md b/files/en-us/web/api/urlsearchparams/sort/index.md
index f005dbe41c41813..07344f02ea2cbb4 100644
--- a/files/en-us/web/api/urlsearchparams/sort/index.md
+++ b/files/en-us/web/api/urlsearchparams/sort/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.sort()
+title: "URLSearchParams: sort() method"
+short-title: sort()
slug: Web/API/URLSearchParams/sort
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.sort
@@ -13,7 +14,7 @@ order is according to unicode code points of the keys. This method uses a stable
algorithm (i.e. the relative order between key/value pairs with equal keys will be
preserved).
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
diff --git a/files/en-us/web/api/urlsearchparams/tostring/index.md b/files/en-us/web/api/urlsearchparams/tostring/index.md
index 95216819992da3b..f0b1de07bf1b942 100644
--- a/files/en-us/web/api/urlsearchparams/tostring/index.md
+++ b/files/en-us/web/api/urlsearchparams/tostring/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.toString()
+title: "URLSearchParams: toString() method"
+short-title: toString()
slug: Web/API/URLSearchParams/toString
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.toString
@@ -11,11 +12,9 @@ The **`toString()`** method of the
{{domxref("URLSearchParams")}} interface returns a query string suitable for use in a
URL.
-> **Note:** This method returns the query string without the question
-> mark. This is different from [window.location.search](/en-US/docs/Web/API/HTMLAnchorElement/search),
-> which includes it.
+> **Note:** This method returns the query string without the question mark. This is different from [`Location.search`](/en-US/docs/Web/API/Location/search), [`HTMLAnchorElement.search`](/en-US/docs/Web/API/HTMLAnchorElement/search), and [`URL.search`](/en-US/docs/Web/API/URL/search), which all include the question mark.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
diff --git a/files/en-us/web/api/urlsearchparams/urlsearchparams/index.md b/files/en-us/web/api/urlsearchparams/urlsearchparams/index.md
index da7cfbc8c5de91b..6cec050c6ca09c0 100644
--- a/files/en-us/web/api/urlsearchparams/urlsearchparams/index.md
+++ b/files/en-us/web/api/urlsearchparams/urlsearchparams/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams()
+title: "URLSearchParams: URLSearchParams() constructor"
+short-title: URLSearchParams()
slug: Web/API/URLSearchParams/URLSearchParams
page-type: web-api-constructor
browser-compat: api.URLSearchParams.URLSearchParams
@@ -10,7 +11,7 @@ browser-compat: api.URLSearchParams.URLSearchParams
The **`URLSearchParams()`** constructor creates and returns a
new {{domxref("URLSearchParams")}} object.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
@@ -24,7 +25,7 @@ new URLSearchParams(options)
- `options` {{optional_inline}}
- : One of:
- A string, which will be parsed from `application/x-www-form-urlencoded` format. A leading `'?'` character is ignored.
- - A literal sequence of name-value string pairs, or any object — such as a {{domxref("FormData")}} object — with an [iterator](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#iterators) that produces a sequence of string pairs. Note that {{domxref("File")}} entries will be serialized as `[object File]` rather than as their filename (as they would in an `application/x-www-form-urlencoded` form).
+ - A literal sequence of name-value string pairs, or any object — such as a {{domxref("FormData")}} object — with an [iterator](/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators#iterators) that produces a sequence of string pairs. Note that {{domxref("File")}} entries will be serialized as `[object File]` rather than as their filename (as they would in an `application/x-www-form-urlencoded` form).
- A record of string keys and string values. Note that nesting is not supported.
### Return value
@@ -37,7 +38,7 @@ The following example shows how to create a {{domxref("URLSearchParams")}} objec
various inputs.
```js
-// Retrieve params via url.search, passed into ctor
+// Retrieve params via url.search, passed into constructor
const url = new URL("https://example.com?foo=1&bar=2");
const params1 = new URLSearchParams(url.search);
@@ -93,7 +94,7 @@ const addSearchParams = (url, params = {}) =>
`${url.origin}${url.pathname}?${new URLSearchParams([
...Array.from(url.searchParams.entries()),
...Object.entries(params),
- ])}`
+ ])}`,
);
```
diff --git a/files/en-us/web/api/urlsearchparams/values/index.md b/files/en-us/web/api/urlsearchparams/values/index.md
index 7a3f5977abc09a6..cb35d8d80022883 100644
--- a/files/en-us/web/api/urlsearchparams/values/index.md
+++ b/files/en-us/web/api/urlsearchparams/values/index.md
@@ -1,5 +1,6 @@
---
-title: URLSearchParams.values()
+title: "URLSearchParams: values() method"
+short-title: values()
slug: Web/API/URLSearchParams/values
page-type: web-api-instance-method
browser-compat: api.URLSearchParams.values
@@ -12,7 +13,7 @@ interface returns an {{jsxref("Iteration_protocols",'iterator')}} allowing itera
through all values contained in this object. The values are string
objects.
-{{availableinworkers}}
+{{AvailableInWorkers}}
## Syntax
@@ -42,7 +43,7 @@ for (const value of searchParams.values()) {
The result is:
-```
+```plain
value1
value2
```
@@ -57,7 +58,7 @@ console.log(Array.from(searchParams.values()));
The result is:
-```
+```plain
['value1', 'value2']
```
diff --git a/files/en-us/web/api/usb/connect_event/index.md b/files/en-us/web/api/usb/connect_event/index.md
index 86c152a7af688dd..191316a98f686d2 100644
--- a/files/en-us/web/api/usb/connect_event/index.md
+++ b/files/en-us/web/api/usb/connect_event/index.md
@@ -1,5 +1,6 @@
---
title: "USB: connect event"
+short-title: connect
slug: Web/API/USB/connect_event
page-type: web-api-event
status:
diff --git a/files/en-us/web/api/usb/disconnect_event/index.md b/files/en-us/web/api/usb/disconnect_event/index.md
index 83e937f060603c5..877d2ad9dd37df3 100644
--- a/files/en-us/web/api/usb/disconnect_event/index.md
+++ b/files/en-us/web/api/usb/disconnect_event/index.md
@@ -1,5 +1,6 @@
---
title: "USB: disconnect event"
+short-title: disconnect
slug: Web/API/USB/disconnect_event
page-type: web-api-event
status:
diff --git a/files/en-us/web/api/usb/getdevices/index.md b/files/en-us/web/api/usb/getdevices/index.md
index b9d21ceb6a8d633..f200eb26202340b 100644
--- a/files/en-us/web/api/usb/getdevices/index.md
+++ b/files/en-us/web/api/usb/getdevices/index.md
@@ -1,5 +1,6 @@
---
-title: USB.getDevices()
+title: "USB: getDevices() method"
+short-title: getDevices()
slug: Web/API/USB/getDevices
page-type: web-api-instance-method
status:
@@ -40,7 +41,7 @@ navigator.usb.getDevices().then((devices) => {
console.log(`Total devices: ${devices.length}`);
devices.forEach((device) => {
console.log(
- `Product name: ${device.productName}, serial number ${device.serialNumber}`
+ `Product name: ${device.productName}, serial number ${device.serialNumber}`,
);
});
});
diff --git a/files/en-us/web/api/usb/requestdevice/index.md b/files/en-us/web/api/usb/requestdevice/index.md
index ca2d8e383cc9046..6c01b02faf5caf1 100644
--- a/files/en-us/web/api/usb/requestdevice/index.md
+++ b/files/en-us/web/api/usb/requestdevice/index.md
@@ -1,5 +1,6 @@
---
-title: USB.requestDevice()
+title: "USB: requestDevice() method"
+short-title: requestDevice()
slug: Web/API/USB/requestDevice
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbconfiguration/configurationname/index.md b/files/en-us/web/api/usbconfiguration/configurationname/index.md
index 0ebb480c3c596d5..05934e9cc657dd7 100644
--- a/files/en-us/web/api/usbconfiguration/configurationname/index.md
+++ b/files/en-us/web/api/usbconfiguration/configurationname/index.md
@@ -1,5 +1,6 @@
---
-title: USBConfiguration.configurationName
+title: "USBConfiguration: configurationName property"
+short-title: configurationName
slug: Web/API/USBConfiguration/configurationName
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbconfiguration/configurationvalue/index.md b/files/en-us/web/api/usbconfiguration/configurationvalue/index.md
index a7861d17b2f7cd0..77fed32c48ab853 100644
--- a/files/en-us/web/api/usbconfiguration/configurationvalue/index.md
+++ b/files/en-us/web/api/usbconfiguration/configurationvalue/index.md
@@ -1,5 +1,6 @@
---
-title: USBConfiguration.configurationValue
+title: "USBConfiguration: configurationValue property"
+short-title: configurationValue
slug: Web/API/USBConfiguration/configurationValue
page-type: web-api-instance-property
status:
@@ -10,7 +11,8 @@ browser-compat: api.USBConfiguration.configurationValue
{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}}
The **`configurationValue`** read-only property
-of the {{domxref("USBConfiguration")}} interface null
+of the {{domxref("USBConfiguration")}} interface returns the configuration value of this configuration. This is equal to the
+[`bConfigurationValue`](https://www.beyondlogic.org/usbnutshell/usb5.shtml#ConfigurationDescriptors) field of the configuration descriptor provided by the device defining this configuration.
## Value
diff --git a/files/en-us/web/api/usbconfiguration/interfaces/index.md b/files/en-us/web/api/usbconfiguration/interfaces/index.md
index e4aa10a1e4dd5ed..fcd2ad80528deda 100644
--- a/files/en-us/web/api/usbconfiguration/interfaces/index.md
+++ b/files/en-us/web/api/usbconfiguration/interfaces/index.md
@@ -1,5 +1,6 @@
---
-title: USBConfiguration.interfaces
+title: "USBConfiguration: interfaces property"
+short-title: interfaces
slug: Web/API/USBConfiguration/interfaces
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbconfiguration/usbconfiguration/index.md b/files/en-us/web/api/usbconfiguration/usbconfiguration/index.md
index c104c64cefbc0f4..a70f164fa0f7020 100644
--- a/files/en-us/web/api/usbconfiguration/usbconfiguration/index.md
+++ b/files/en-us/web/api/usbconfiguration/usbconfiguration/index.md
@@ -1,5 +1,6 @@
---
-title: USBConfiguration()
+title: "USBConfiguration: USBConfiguration() constructor"
+short-title: USBConfiguration()
slug: Web/API/USBConfiguration/USBConfiguration
page-type: web-api-constructor
status:
diff --git a/files/en-us/web/api/usbconnectionevent/device/index.md b/files/en-us/web/api/usbconnectionevent/device/index.md
index fb99f5353e18a0f..bbf221158d98da0 100644
--- a/files/en-us/web/api/usbconnectionevent/device/index.md
+++ b/files/en-us/web/api/usbconnectionevent/device/index.md
@@ -1,5 +1,6 @@
---
-title: USBConnectionEvent.device
+title: "USBConnectionEvent: device property"
+short-title: device
slug: Web/API/USBConnectionEvent/device
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbconnectionevent/index.md b/files/en-us/web/api/usbconnectionevent/index.md
index 07889733737973e..2f60b32052c94d7 100644
--- a/files/en-us/web/api/usbconnectionevent/index.md
+++ b/files/en-us/web/api/usbconnectionevent/index.md
@@ -9,7 +9,7 @@ browser-compat: api.USBConnectionEvent
{{securecontext_header}}{{APIRef("WebUSB API")}}{{SeeCompatTable}}
-The **`USBConnectionEvent`** interface of the {{domxref('WebUSB API','','',' ')}} is the event type passed to {{domxref("USB.onconnect")}} and {{domxref("USB.ondisconnect")}} when the user agent detects that a new USB device has been connected or disconnected.
+The **`USBConnectionEvent`** interface of the {{domxref('WebUSB API','','',' ')}} is the event type passed to `USB` {{domxref("USB.connect_event", "connect")}} and {{domxref("USB.disconnect_event", "disconnect")}} events when the user agent detects that a new USB device has been connected or disconnected.
{{InheritanceDiagram}}
diff --git a/files/en-us/web/api/usbconnectionevent/usbconnectionevent/index.md b/files/en-us/web/api/usbconnectionevent/usbconnectionevent/index.md
index bc3489875eeb467..24282c0f7cd6924 100644
--- a/files/en-us/web/api/usbconnectionevent/usbconnectionevent/index.md
+++ b/files/en-us/web/api/usbconnectionevent/usbconnectionevent/index.md
@@ -1,5 +1,6 @@
---
-title: USBConnectionEvent()
+title: "USBConnectionEvent: USBConnectionEvent() constructor"
+short-title: USBConnectionEvent()
slug: Web/API/USBConnectionEvent/USBConnectionEvent
page-type: web-api-constructor
status:
diff --git a/files/en-us/web/api/usbdevice/claiminterface/index.md b/files/en-us/web/api/usbdevice/claiminterface/index.md
index 9c79b5eeb95b253..fa223bfde1c16da 100644
--- a/files/en-us/web/api/usbdevice/claiminterface/index.md
+++ b/files/en-us/web/api/usbdevice/claiminterface/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.claimInterface()
+title: "USBDevice: claimInterface() method"
+short-title: claimInterface()
slug: Web/API/USBDevice/claimInterface
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/clearhalt/index.md b/files/en-us/web/api/usbdevice/clearhalt/index.md
index b6f25d86c8d65eb..fdd21b259fc234d 100644
--- a/files/en-us/web/api/usbdevice/clearhalt/index.md
+++ b/files/en-us/web/api/usbdevice/clearhalt/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.clearHalt()
+title: "USBDevice: clearHalt() method"
+short-title: clearHalt()
slug: Web/API/USBDevice/clearHalt
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/close/index.md b/files/en-us/web/api/usbdevice/close/index.md
index 67d395d24280eee..2c90aaee0701472 100644
--- a/files/en-us/web/api/usbdevice/close/index.md
+++ b/files/en-us/web/api/usbdevice/close/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.close()
+title: "USBDevice: close() method"
+short-title: close()
slug: Web/API/USBDevice/close
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/configuration/index.md b/files/en-us/web/api/usbdevice/configuration/index.md
index 0f215e5c3aee951..ffc63d447ee52a8 100644
--- a/files/en-us/web/api/usbdevice/configuration/index.md
+++ b/files/en-us/web/api/usbdevice/configuration/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.configuration
+title: "USBDevice: configuration property"
+short-title: configuration
slug: Web/API/USBDevice/configuration
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/configurations/index.md b/files/en-us/web/api/usbdevice/configurations/index.md
index 8550353691aaeea..e0dff6aa2bc7fad 100644
--- a/files/en-us/web/api/usbdevice/configurations/index.md
+++ b/files/en-us/web/api/usbdevice/configurations/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.configurations
+title: "USBDevice: configurations property"
+short-title: configurations
slug: Web/API/USBDevice/configurations
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/controltransferin/index.md b/files/en-us/web/api/usbdevice/controltransferin/index.md
index 11e210b6abbb8f6..ba14b9691a172d3 100644
--- a/files/en-us/web/api/usbdevice/controltransferin/index.md
+++ b/files/en-us/web/api/usbdevice/controltransferin/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.controlTransferIn()
+title: "USBDevice: controlTransferIn() method"
+short-title: controlTransferIn()
slug: Web/API/USBDevice/controlTransferIn
page-type: web-api-instance-method
status:
@@ -30,7 +31,7 @@ controlTransferIn(setup, length)
- `request`
- : A vendor-specific command.
- `value`
- - : Vender-specific request parameters.
+ - : Vendor-specific request parameters.
- `index`
- : The interface number of the recipient.
diff --git a/files/en-us/web/api/usbdevice/controltransferout/index.md b/files/en-us/web/api/usbdevice/controltransferout/index.md
index 0085feb8b4b3016..91c22c6cd97a92e 100644
--- a/files/en-us/web/api/usbdevice/controltransferout/index.md
+++ b/files/en-us/web/api/usbdevice/controltransferout/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.controlTransferOut()
+title: "USBDevice: controlTransferOut() method"
+short-title: controlTransferOut()
slug: Web/API/USBDevice/controlTransferOut
page-type: web-api-instance-method
status:
@@ -35,7 +36,7 @@ controlTransferOut(setup, data)
- : The interface number of the recipient.
- `data`
- - : A {{domxref("TypedArray")}} containing the data that will be transferred to the device.
+ - : A {{jsxref("TypedArray")}} containing the data that will be transferred to the device.
Not all commands require data; some commands can send data just through the value parameter.
Check with your device to see what the specific request requires.
diff --git a/files/en-us/web/api/usbdevice/deviceclass/index.md b/files/en-us/web/api/usbdevice/deviceclass/index.md
index 77c5a34e73e992b..f5abb5323fa42b7 100644
--- a/files/en-us/web/api/usbdevice/deviceclass/index.md
+++ b/files/en-us/web/api/usbdevice/deviceclass/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.deviceClass
+title: "USBDevice: deviceClass property"
+short-title: deviceClass
slug: Web/API/USBDevice/deviceClass
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/deviceprotocol/index.md b/files/en-us/web/api/usbdevice/deviceprotocol/index.md
index ccb087711758b0c..21cbc2a00c9472d 100644
--- a/files/en-us/web/api/usbdevice/deviceprotocol/index.md
+++ b/files/en-us/web/api/usbdevice/deviceprotocol/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.deviceProtocol
+title: "USBDevice: deviceProtocol property"
+short-title: deviceProtocol
slug: Web/API/USBDevice/deviceProtocol
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/devicesubclass/index.md b/files/en-us/web/api/usbdevice/devicesubclass/index.md
index 1356b294adb5d1f..68ebb9a91c1a1d9 100644
--- a/files/en-us/web/api/usbdevice/devicesubclass/index.md
+++ b/files/en-us/web/api/usbdevice/devicesubclass/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.deviceSubclass
+title: "USBDevice: deviceSubclass property"
+short-title: deviceSubclass
slug: Web/API/USBDevice/deviceSubclass
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/deviceversionmajor/index.md b/files/en-us/web/api/usbdevice/deviceversionmajor/index.md
index bed648cc52ff370..8c0c89c1285e0f2 100644
--- a/files/en-us/web/api/usbdevice/deviceversionmajor/index.md
+++ b/files/en-us/web/api/usbdevice/deviceversionmajor/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.deviceVersionMajor
+title: "USBDevice: deviceVersionMajor property"
+short-title: deviceVersionMajor
slug: Web/API/USBDevice/deviceVersionMajor
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/deviceversionminor/index.md b/files/en-us/web/api/usbdevice/deviceversionminor/index.md
index 0baca6fe97b99d0..41e2c4ea011f833 100644
--- a/files/en-us/web/api/usbdevice/deviceversionminor/index.md
+++ b/files/en-us/web/api/usbdevice/deviceversionminor/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.deviceVersionMinor
+title: "USBDevice: deviceVersionMinor property"
+short-title: deviceVersionMinor
slug: Web/API/USBDevice/deviceVersionMinor
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/deviceversionsubminor/index.md b/files/en-us/web/api/usbdevice/deviceversionsubminor/index.md
index a8f49212ef98aed..cc0508d1013501d 100644
--- a/files/en-us/web/api/usbdevice/deviceversionsubminor/index.md
+++ b/files/en-us/web/api/usbdevice/deviceversionsubminor/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.deviceVersionSubminor
+title: "USBDevice: deviceVersionSubminor property"
+short-title: deviceVersionSubminor
slug: Web/API/USBDevice/deviceVersionSubminor
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/forget/index.md b/files/en-us/web/api/usbdevice/forget/index.md
index cbd0e748fb38d53..0c72136d34f3277 100644
--- a/files/en-us/web/api/usbdevice/forget/index.md
+++ b/files/en-us/web/api/usbdevice/forget/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.forget()
+title: "USBDevice: forget() method"
+short-title: forget()
slug: Web/API/USBDevice/forget
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/isochronoustransferin/index.md b/files/en-us/web/api/usbdevice/isochronoustransferin/index.md
index 83770bd855b0df8..9c0626f97f4336d 100644
--- a/files/en-us/web/api/usbdevice/isochronoustransferin/index.md
+++ b/files/en-us/web/api/usbdevice/isochronoustransferin/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.isochronousTransferIn()
+title: "USBDevice: isochronousTransferIn() method"
+short-title: isochronousTransferIn()
slug: Web/API/USBDevice/isochronousTransferIn
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/isochronoustransferout/index.md b/files/en-us/web/api/usbdevice/isochronoustransferout/index.md
index 48cc546feaa8adc..05cccf4ff354ed4 100644
--- a/files/en-us/web/api/usbdevice/isochronoustransferout/index.md
+++ b/files/en-us/web/api/usbdevice/isochronoustransferout/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.isochronousTransferOut()
+title: "USBDevice: isochronousTransferOut() method"
+short-title: isochronousTransferOut()
slug: Web/API/USBDevice/isochronousTransferOut
page-type: web-api-instance-method
status:
@@ -23,7 +24,7 @@ isochronousTransferOut(endpointNumber, data, packetLengths)
- `endpointNumber`
- : The number of a device-specific endpoint (buffer).
- `data`
- - : A {{domxref("TypedArray")}} containing the data to send to the device.
+ - : A {{jsxref("TypedArray")}} containing the data to send to the device.
- `packetLengths`
- : An array of lengths for the packets being transferred.
diff --git a/files/en-us/web/api/usbdevice/manufacturername/index.md b/files/en-us/web/api/usbdevice/manufacturername/index.md
index 8343589d0e0aa15..9a63fe4df93904b 100644
--- a/files/en-us/web/api/usbdevice/manufacturername/index.md
+++ b/files/en-us/web/api/usbdevice/manufacturername/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.manufacturerName
+title: "USBDevice: manufacturerName property"
+short-title: manufacturerName
slug: Web/API/USBDevice/manufacturerName
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/open/index.md b/files/en-us/web/api/usbdevice/open/index.md
index 20f6d940ac746fe..2fd4d075dfae7be 100644
--- a/files/en-us/web/api/usbdevice/open/index.md
+++ b/files/en-us/web/api/usbdevice/open/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.open()
+title: "USBDevice: open() method"
+short-title: open()
slug: Web/API/USBDevice/open
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/opened/index.md b/files/en-us/web/api/usbdevice/opened/index.md
index 900bb6230a6c2a2..c669a07558304ba 100644
--- a/files/en-us/web/api/usbdevice/opened/index.md
+++ b/files/en-us/web/api/usbdevice/opened/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.opened
+title: "USBDevice: opened property"
+short-title: opened
slug: Web/API/USBDevice/opened
page-type: web-api-instance-property
status:
@@ -41,7 +42,7 @@ async function setDeviceColor(usbDevice, r, g, b) {
value: 0,
index: 0,
},
- payload
+ payload,
);
}
}
diff --git a/files/en-us/web/api/usbdevice/productid/index.md b/files/en-us/web/api/usbdevice/productid/index.md
index b3290aa2ef19088..472f845d3bc8006 100644
--- a/files/en-us/web/api/usbdevice/productid/index.md
+++ b/files/en-us/web/api/usbdevice/productid/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.productId
+title: "USBDevice: productId property"
+short-title: productId
slug: Web/API/USBDevice/productID
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/productname/index.md b/files/en-us/web/api/usbdevice/productname/index.md
index b6d4dff78b9dd51..925a317408366b6 100644
--- a/files/en-us/web/api/usbdevice/productname/index.md
+++ b/files/en-us/web/api/usbdevice/productname/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.productName
+title: "USBDevice: productName property"
+short-title: productName
slug: Web/API/USBDevice/productName
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/releaseinterface/index.md b/files/en-us/web/api/usbdevice/releaseinterface/index.md
index 8a42b3bb28326e3..8b07270cdbf850e 100644
--- a/files/en-us/web/api/usbdevice/releaseinterface/index.md
+++ b/files/en-us/web/api/usbdevice/releaseinterface/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.releaseInterface()
+title: "USBDevice: releaseInterface() method"
+short-title: releaseInterface()
slug: Web/API/USBDevice/releaseInterface
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/reset/index.md b/files/en-us/web/api/usbdevice/reset/index.md
index a194dd952d544ae..626cf7a2500540f 100644
--- a/files/en-us/web/api/usbdevice/reset/index.md
+++ b/files/en-us/web/api/usbdevice/reset/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.reset()
+title: "USBDevice: reset() method"
+short-title: reset()
slug: Web/API/USBDevice/reset
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/selectalternateinterface/index.md b/files/en-us/web/api/usbdevice/selectalternateinterface/index.md
index e7648716d535fd2..7ec4258fd5ccdfb 100644
--- a/files/en-us/web/api/usbdevice/selectalternateinterface/index.md
+++ b/files/en-us/web/api/usbdevice/selectalternateinterface/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.selectAlternateInterface()
+title: "USBDevice: selectAlternateInterface() method"
+short-title: selectAlternateInterface()
slug: Web/API/USBDevice/selectAlternateInterface
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/selectconfiguration/index.md b/files/en-us/web/api/usbdevice/selectconfiguration/index.md
index 81b2a110d1f03c9..5d9240016d0a145 100644
--- a/files/en-us/web/api/usbdevice/selectconfiguration/index.md
+++ b/files/en-us/web/api/usbdevice/selectconfiguration/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.selectConfiguration()
+title: "USBDevice: selectConfiguration() method"
+short-title: selectConfiguration()
slug: Web/API/USBDevice/selectConfiguration
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/serialnumber/index.md b/files/en-us/web/api/usbdevice/serialnumber/index.md
index 7ac3e2bfc355059..710f68fea5d07ae 100644
--- a/files/en-us/web/api/usbdevice/serialnumber/index.md
+++ b/files/en-us/web/api/usbdevice/serialnumber/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.serialNumber
+title: "USBDevice: serialNumber property"
+short-title: serialNumber
slug: Web/API/USBDevice/serialNumber
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/transferin/index.md b/files/en-us/web/api/usbdevice/transferin/index.md
index 18ad0c6e345009c..5180f0c0c45108b 100644
--- a/files/en-us/web/api/usbdevice/transferin/index.md
+++ b/files/en-us/web/api/usbdevice/transferin/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.transferIn()
+title: "USBDevice: transferIn() method"
+short-title: transferIn()
slug: Web/API/USBDevice/transferIn
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/transferout/index.md b/files/en-us/web/api/usbdevice/transferout/index.md
index a7f1b6b807c2ab1..02ec7842532590c 100644
--- a/files/en-us/web/api/usbdevice/transferout/index.md
+++ b/files/en-us/web/api/usbdevice/transferout/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.transferOut()
+title: "USBDevice: transferOut() method"
+short-title: transferOut()
slug: Web/API/USBDevice/transferOut
page-type: web-api-instance-method
status:
diff --git a/files/en-us/web/api/usbdevice/usbversionmajor/index.md b/files/en-us/web/api/usbdevice/usbversionmajor/index.md
index 88016454e4d0ea5..5cec06a4729ed04 100644
--- a/files/en-us/web/api/usbdevice/usbversionmajor/index.md
+++ b/files/en-us/web/api/usbdevice/usbversionmajor/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.usbVersionMajor
+title: "USBDevice: usbVersionMajor property"
+short-title: usbVersionMajor
slug: Web/API/USBDevice/usbVersionMajor
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/usbversionminor/index.md b/files/en-us/web/api/usbdevice/usbversionminor/index.md
index a1e8021c4b99b10..6fa2ef01ec61e55 100644
--- a/files/en-us/web/api/usbdevice/usbversionminor/index.md
+++ b/files/en-us/web/api/usbdevice/usbversionminor/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.usbVersionMinor
+title: "USBDevice: usbVersionMinor property"
+short-title: usbVersionMinor
slug: Web/API/USBDevice/usbVersionMinor
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/usbversionsubminor/index.md b/files/en-us/web/api/usbdevice/usbversionsubminor/index.md
index 8fab613f969849a..20ab56859e4f20e 100644
--- a/files/en-us/web/api/usbdevice/usbversionsubminor/index.md
+++ b/files/en-us/web/api/usbdevice/usbversionsubminor/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.usbVersionSubminor
+title: "USBDevice: usbVersionSubminor property"
+short-title: usbVersionSubminor
slug: Web/API/USBDevice/usbVersionSubminor
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/usbdevice/vendorid/index.md b/files/en-us/web/api/usbdevice/vendorid/index.md
index cd6eac367176aa2..d07745ec728fd03 100644
--- a/files/en-us/web/api/usbdevice/vendorid/index.md
+++ b/files/en-us/web/api/usbdevice/vendorid/index.md
@@ -1,5 +1,6 @@
---
-title: USBDevice.vendorId
+title: "USBDevice: vendorId property"
+short-title: vendorId
slug: Web/API/USBDevice/vendorID
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.USBDevice.vendorId
{{SeeCompatTable}}{{APIRef("WebUSB API")}}
The **`vendorId`** read only property of the
-{{domxref("USBDevice")}} interface is the official usg.org-assigned vendor ID.
+{{domxref("USBDevice")}} interface is the official usb.org-assigned vendor ID.
## Value
diff --git a/files/en-us/web/api/user-agent_client_hints_api/index.md b/files/en-us/web/api/user-agent_client_hints_api/index.md
index ba30a2d306ae4bc..0b1080d773f2822 100644
--- a/files/en-us/web/api/user-agent_client_hints_api/index.md
+++ b/files/en-us/web/api/user-agent_client_hints_api/index.md
@@ -15,7 +15,7 @@ The User-Agent Client Hints API extends [Client Hints](/en-US/docs/Web/HTTP/Clie
Parsing the User-Agent string has historically been the way to get information about the user's browser or device. A typical user agent string looks like the following example, identifying Chrome 92 on Windows:
-```
+```plain
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
```
@@ -81,5 +81,5 @@ navigator.userAgentData
## See also
-- [Improving user privacy and developer experience with User-Agent Client Hints](https://web.dev/user-agent-client-hints/)
-- [Migrate to User-Agent Client Hints](https://web.dev/migrate-to-ua-ch/)
+- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints)
+- [Migrate to User-Agent Client Hints](https://web.dev/articles/migrate-to-ua-ch)
diff --git a/files/en-us/web/api/user_timing_api/index.md b/files/en-us/web/api/user_timing_api/index.md
deleted file mode 100644
index e2bfb772cf0bb31..000000000000000
--- a/files/en-us/web/api/user_timing_api/index.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: User Timing API
-slug: Web/API/User_Timing_API
-page-type: web-api-overview
----
-
-{{DefaultAPISidebar("Performance API")}}
-
-The **User Timing API** allows you measure the performance of applications using [high-precision timestamps](/en-US/docs/Web/API/DOMHighResTimeStamp) that are part of the browser's performance timeline. There are two types of timing performance entries:
-
-- {{domxref("PerformanceMark")}} entries are marks that you can name and add at any location in an application.
-- {{domxref("PerformanceMeasure")}} entries are time measurements between two marks.
-
-This document provides an overview how to work with the mark and measure performance entry types. For more details and example code, see [Using the User Timing API](/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API).
-
-## Performance marks
-
-Interface: {{domxref("PerformanceMark")}}
-
-{{InheritanceDiagram("PerformanceMark")}}
-
-The `PerformanceMark` interface has the following read-only properties (directly or inherited from {{domxref("PerformanceEntry")}}):
-
-- {{domxref("PerformanceMark.detail","detail")}} provides additional information about the mark.
-- {{domxref("PerformanceEntry.duration","duration")}} is always `0` (a mark has no duration).
-- {{domxref("PerformanceEntry.entryType","entryType")}} is always `"mark"`.
-- {{domxref("PerformanceEntry.name","name")}} is the name given when the mark was created.
-- {{domxref("PerformanceEntry.startTime","startTime")}} is the {{domxref("DOMHighResTimeStamp","timestamp")}} when `mark()` was called.
-
-### Creating performance marks
-
-- {{domxref("Performance.mark","performance.mark()")}} adds a performance mark to the browser's performance timeline.
-- {{domxref("PerformanceMark.PerformanceMark", "PerformanceMark()")}} constructs a `PerformanceMark` object that isn't added to the browser's performance timeline.
-
-### Retrieving performance marks
-
-- [`performance.getEntriesByType("mark")`](/en-US/docs/Web/API/Performance/getEntriesByType) gets all marks.
-- [`performance.getEntriesByName("myMarker", "mark")`](/en-US/docs/Web/API/Performance/getEntriesByName) gets all marks with the name "myMarker".
-- {{domxref("Performance.getEntries","performance.getEntries()")}} gets all entries (filter as needed).
-
-### Removing performance marks
-
-- [`performance.clearMarks("myMarker")`](/en-US/docs/Web/API/Performance/clearMarks) removes the performance marker with the name "myMarker".
-- [`performance.clearMarks()`](/en-US/docs/Web/API/Performance/clearMarks) removes all performance markers.
-
-## Performance measures
-
-Interface: {{domxref("PerformanceMeasure")}}
-
-{{InheritanceDiagram("PerformanceMeasure")}}
-
-The `PerformanceMeasure` interface has the following read-only properties (directly or inherited from {{domxref("PerformanceEntry")}}):
-
-- {{domxref("PerformanceMeasure.detail","detail")}} provides additional information about the measure.
-- {{domxref("PerformanceEntry.duration","duration")}} is a {{domxref("DOMHighResTimeStamp")}} that is the duration of the measure (typically, the end mark timestamp minus the start mark timestamp).
-- {{domxref("PerformanceEntry.entryType","entryType")}} is always `"measure"`.
-- {{domxref("PerformanceEntry.name","name")}} is the name given when the measure was created.
-- {{domxref("PerformanceEntry.startTime","startTime")}} is the {{domxref("DOMHighResTimeStamp","timestamp")}} when `measure()` was called.
-
-### Creating performance measures
-
-- [`performance.measure(measureName, startMarkName, endMarkName)`](/en-US/docs/Web/API/Performance/measure) creates a measure where `measureName` is the measure's name and `startMarkName` and `endMarkName` are the start and end names, respectively, of the marks the measure will be placed between (in the performance timeline).
-
-### Retrieving performance measures
-
-- [`performance.getEntriesByType("measure")`](/en-US/docs/Web/API/Performance/getEntriesByType) gets all measures.
-- [`performance.getEntriesByName("myMeasure", "measure")`](/en-US/docs/Web/API/Performance/getEntriesByName) gets all measures with the name "myMeasure".
-- {{domxref("Performance.getEntries","performance.getEntries()")}} gets all entries (filter as needed).
-
-### Removing performance measures
-
-- [`performance.clearMeasures("myMeasure")`](/en-US/docs/Web/API/Performance/clearMeasures) removes the performance measure with the name "myMeasure".
-- [`performance.clearMeasures()`](/en-US/docs/Web/API/Performance/clearMeasures) removes all performance measures.
-
-## Examples
-
-### Measuring login duration
-
-Typically, you identify the most critical paths of your application and measure how long it takes from start to finish. For example, you can measure how long it takes to login:
-
-```js
-// Place at a location in the code that starts login
-performance.mark("login-started");
-
-// Place at a location in the code that finishes login
-performance.mark("login-finished");
-
-// Measure login duration
-const loginMeasure = performance.measure(
- "login-duration",
- "login-started",
- "login-finished"
-);
-
-// Send to analytics endpoint
-// or log to the console
-console.log(loginMeasure.duration);
-```
-
-## Specifications
-
-- [User Timing specification](https://w3c.github.io/user-timing/)
-
-## See also
-
-- [Using the User Timing API](/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API)
-- {{domxref("PerformanceMark")}}
-- {{domxref("PerformanceMeasure")}}
diff --git a/files/en-us/web/api/user_timing_api/using_the_user_timing_api/index.md b/files/en-us/web/api/user_timing_api/using_the_user_timing_api/index.md
deleted file mode 100644
index f317e1d31f74623..000000000000000
--- a/files/en-us/web/api/user_timing_api/using_the_user_timing_api/index.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: Using the User Timing API
-slug: Web/API/User_Timing_API/Using_the_User_Timing_API
-page-type: guide
----
-
-{{DefaultAPISidebar("Performance API")}}
-
-The **User Timing API** allows you to measure the performance of applications using [high-precision timestamps](/en-US/docs/Web/API/DOMHighResTimeStamp) that are part of the browser's performance timeline.
-There are two types of timing performance entries:
-
-- {{domxref("PerformanceMark")}} entries are marks that you can name and add at any location in an application.
-- {{domxref("PerformanceMeasure")}} entries are time measurements between two marks.
-
-This document explains how to work with the mark and measure performance entry types. If you are already familiar with the API, see the [User Timing API](/en-US/docs/Web/API/User_Timing_API) overview page, or consult the reference pages.
-
-## What is User Timing?
-
-The browser provides certain information (called _performance entries_) to the browser's performance timeline for you. This includes, for example, entries provided by the [Resource Timing API](/en-US/docs/Web/API/Resource_Timing_API) that determine the time it takes to fetch a resource like an image.
-
-The browser, however, can not determine what is going on in your application. For example, when a user clicks a button or performs a specific task within your application, there is no high-precision performance measurement. The User Timing API is an extension to the browser's performance timeline and helps you to measure and record performance data that is custom to your application.
-
-The advantage of using this API, over calls to {{jsxref("Date.now()")}} or {{domxref("performance.now()")}}, is that you can give the markers a name and that it integrates well with performance tooling. Browser's developer tools can display performance marks in Performance Panels, and it also works with other performance APIs like {{domxref("PerformanceObserver")}} objects.
-
-## Adding performance markers
-
-As a first step to start measuring the performance of your app's functionality, you need to add named performance markers at important places in your code. Ideally, you go through your codebase and determine critical paths and important tasks for which you want to ensure they can be performed fast.
-
-The {{domxref("Performance.mark","performance.mark()")}} method is used to create a {{domxref("PerformanceMark")}}. The method takes one argument, the `name` of the mark, as shown in the following example.
-
-```js
-// Place at a location in the code that starts login
-performance.mark("login-started");
-
-// Place at a location in the code that finishes login
-performance.mark("login-finished");
-```
-
-If the `name` argument isn't enough, `mark()` is configurable using an options object where you can put additional information in the `detail` property, which can be of any type. You can also set a different `startTime` if needed. In the following code, the `startTime` is set to `12.5`, and additional information, like the HTML element used, is provided with `detail`.
-
-```js
-performance.mark("login-started", {
- startTime: 12.5,
- detail: { htmlElement: myElement.id },
-});
-```
-
-## Measuring duration between markers
-
-Now that you added markers to your application, you can measure the time between them.
-
-The {{domxref("Performance.measure()")}} method is used to create a {{domxref("PerformanceMeasure")}} object. It accepts a `name` parameter, used to identify the measure, and two marks, `start` and `end`, that it should measure between. The following example creates a `"login-duration"` measure and measures between the start and the finish of the login process.
-
-The object then has a `duration` property which calculates the end mark timestamp minus the start mark timestamp for you. For example, you can log this value or send it to some analytics endpoint.
-
-```js
-const loginMeasure = performance.measure(
- "login-duration",
- "login-started",
- "login-finished"
-);
-
-console.log(loginMeasure.duration);
-```
-
-The {{domxref("Performance.measure()")}} method is also configurable using an options object, so you can do more advanced measurements or provide additional information using the `detail` property.
-
-For example, you can use the [`event.timestamp`](/en-US/docs/Web/API/Event/timeStamp) property from a [`click` event](/en-US/docs/Web/API/Element/click_event) to know exactly when a user clicked login and measure that to the point in time when the UI was updated, which is the `"login-finished"` marker here.
-
-```js
-loginButton.addEventListener("click", (clickEvent) => {
- fetch(loginURL).then((data) => {
- renderLoggedInUser(data);
-
- const marker = performance.mark("login-finished");
-
- performance.measure("login-click", {
- detail: { htmlElement: myElement.id },
- start: clickEvent.timeStamp,
- end: marker.startTime,
- });
- });
-});
-```
-
-## Observing performance measures
-
-The preferred way to get notified about your custom performance measures is the use of {{domxref("PerformanceObserver")}} objects. Performance observers allow you to subscribe passively to performance marks and measures as they happen.
-
-```js
-function perfObserver(list, observer) {
- list.getEntries().forEach((entry) => {
- if (entry.entryType === "mark") {
- console.log(`${entry.name}'s startTime: ${entry.startTime}`);
- }
- if (entry.entryType === "measure") {
- console.log(`${entry.name}'s duration: ${entry.duration}`);
- }
- });
-}
-const observer = new PerformanceObserver(perfObserver);
-observer.observe({ entryTypes: ["measure", "mark"] });
-```
-
-For more information, see {{domxref("PerformanceObserver")}} and [Using Performance Timeline](/en-US/docs/Web/API/Performance_Timeline/Using_Performance_Timeline).
-
-## Retrieving markers and measures
-
-There are many different performance entries in the browser's performance timeline. Some are added by the browser, and some might be added by you, like the login markers and measures from the examples above.
-
-To retrieve performance marks and measures at a single point in time, the {{domxref("Performance")}} interface provides three methods, as shown below.
-
-> **Note:** The methods below do not notify you about new performance markers; you will only get markers that have been created when you call these methods.
-> See the section [Observing performance measures](#observing_performance_measures) above for receiving notifications about new metrics as they become available using a {{domxref("PerformanceObserver")}}. Usually, using performance observers is the preferred way to get performance markers and measures.
-
-The {{domxref("Performance.getEntries","performance.getEntries()")}} method gets all performance entries. You can filter them as needed.
-
-```js
-const entries = performance.getEntries();
-entries.forEach((entry) => {
- if (entry.entryType === "mark") {
- console.log(`${entry.name}'s startTime: ${entry.startTime}`);
- }
- if (entry.entryType === "measure") {
- console.log(`${entry.name}'s duration: ${entry.duration}`);
- }
-});
-```
-
-The {{domxref("Performance.getEntriesByType","performance.getEntriesByType(entryType)")}} method filters the entries by type already.
-
-```js
-const marks = performance.getEntriesByType("mark");
-marks.forEach((entry) => {
- console.log(`${entry.name}'s startTime: ${entry.startTime}`);
-});
-
-const measures = performance.getEntriesByType("measure");
-measures.forEach((entry) => {
- console.log(`${entry.name}'s duration: ${entry.duration}`);
-});
-```
-
-The {{domxref("Performance.getEntriesByName","performance.getEntriesByName(name, entryType)")}} method allows you to get specific marks or measures by name.
-
-```js
-// Log all marks named "debug-marks"
-const debugMarks = performance.getEntriesByName("debug-mark", "mark");
-debugMarks.forEach((entry) => {
- console.log(`${entry.name}'s startTime: ${entry.startTime}`);
-});
-```
-
-## Removing markers and measures
-
-To clean up all performance marks or measures, or just specific entries, the following methods are available:
-
-- [`performance.clearMarks()`](/en-US/docs/Web/API/Performance/clearMarks)
-- [`performance.clearMeasures()`](/en-US/docs/Web/API/Performance/clearMeasures)
-
-```js
-// Clear all marks
-performance.clearMarks();
-
-// Removes the marker with the name "myMarker"
-performance.clearMarks("myMarker");
-
-// Clear all measures
-performance.clearMeasures();
-
-// Removes the measure with the name "myMeasure"
-performance.clearMeasures("myMeasure");
-```
-
-## See also
-
-- [User Timing API overview](/en-US/docs/Web/API/User_Timing_API)
-- {{domxref("Performance")}}
-- {{domxref("PerformanceMark")}}
-- {{domxref("PerformanceMeasure")}}
-- {{domxref("PerformanceEntry")}}
-- {{domxref("PerformanceObserver")}}
diff --git a/files/en-us/web/api/useractivation/hasbeenactive/index.md b/files/en-us/web/api/useractivation/hasbeenactive/index.md
index dcbe1707d2ee9e5..8eb3bb518cfdcd0 100644
--- a/files/en-us/web/api/useractivation/hasbeenactive/index.md
+++ b/files/en-us/web/api/useractivation/hasbeenactive/index.md
@@ -1,5 +1,6 @@
---
-title: UserActivation.hasBeenActive
+title: "UserActivation: hasBeenActive property"
+short-title: hasBeenActive
slug: Web/API/UserActivation/hasBeenActive
page-type: web-api-instance-property
browser-compat: api.UserActivation.hasBeenActive
@@ -7,7 +8,7 @@ browser-compat: api.UserActivation.hasBeenActive
{{APIRef("HTML DOM")}}
-The read-only **`hasBeenActive`** property of the {{domxref("UserActivation")}} interface indicates whether the current window has sticky user activation (see {{Glossary("sticky activation")}}).
+The read-only **`hasBeenActive`** property of the {{domxref("UserActivation")}} interface indicates whether the current window has {{Glossary("sticky activation","sticky user activation")}}.
## Value
@@ -17,7 +18,7 @@ A boolean.
### Checking if a user gesture was ever performed
-Use the `hasBeenActive` property to check whether the user has ever interacted with the page.
+Use the `hasBeenActive` property to check whether the user has interacted with the page since it was loaded.
```js
if (navigator.userActivation.hasBeenActive) {
diff --git a/files/en-us/web/api/useractivation/index.md b/files/en-us/web/api/useractivation/index.md
index 6c9e06290e59adf..be7c61911605d0b 100644
--- a/files/en-us/web/api/useractivation/index.md
+++ b/files/en-us/web/api/useractivation/index.md
@@ -7,16 +7,7 @@ browser-compat: api.UserActivation
{{APIRef("HTML DOM")}}
-The **`UserActivation`** interface allows querying information about a window's user activation state.
-
-A user activation either implies that the user is currently interacting with the page, or has completed an interaction since page load. Typically, this is a click on a button or some other user interaction with the UI.
-
-There are two kinds of window user activation states:
-
-- {{Glossary("Transient activation")}} (user is currently interacting with the page) and
-- {{Glossary("Sticky activation")}} (user has interacted at least once since page load).
-
-See [Features gated by user activation](/en-US/docs/Web/Security/User_activation) for more information and a list of APIs that require either sticky or transient user activation.
+The **`UserActivation`** interface provides information about whether a user is currently interacting with the page, or has completed an interaction since page load.
This API is only available in the window context and not exposed to workers.
@@ -27,11 +18,25 @@ This API is only available in the window context and not exposed to workers.
- {{domxref("UserActivation.isActive")}} {{ReadOnlyInline}}
- : Indicates whether the current window has transient user activation.
+## Description
+
+An object of this type is accessed via the {{domxref("navigator.userActivation")}} property, and can be used to query information about a window's user activation state.
+
+A user activation either implies that the user is currently interacting with the page, or has completed an interaction since page load.
+User activation can be triggered by a button click, pointer touch, or some other user interaction with the page.
+
+There are two kinds of window user activation states:
+
+- {{Glossary("Transient activation")}} (user is currently interacting with the page) and
+- {{Glossary("Sticky activation")}} (user has interacted at least once since page load).
+
+See [Features gated by user activation](/en-US/docs/Web/Security/User_activation) for more information and a list of APIs that require either sticky or transient user activation.
+
## Examples
### Checking if a user gesture was recently performed
-Use {{domxref("UserActivation.isActive")}} to check whether the user is currently interacting with the page ({{Glossary("Transient activation")}}).
+Use {{domxref("navigator.userActivation")}} to access the `UserActivation` object, and then {{domxref("UserActivation.isActive")}} to check whether the user is currently interacting with the page ({{Glossary("Transient activation")}}).
```js
if (navigator.userActivation.isActive) {
diff --git a/files/en-us/web/api/useractivation/isactive/index.md b/files/en-us/web/api/useractivation/isactive/index.md
index 8e294398be71330..14bccaa3d502e1e 100644
--- a/files/en-us/web/api/useractivation/isactive/index.md
+++ b/files/en-us/web/api/useractivation/isactive/index.md
@@ -1,5 +1,6 @@
---
-title: UserActivation.isActive
+title: "UserActivation: isActive property"
+short-title: isActive
slug: Web/API/UserActivation/isActive
page-type: web-api-instance-property
browser-compat: api.UserActivation.isActive
@@ -7,7 +8,7 @@ browser-compat: api.UserActivation.isActive
{{APIRef("HTML DOM")}}
-The read-only **`isActive`** property of the {{domxref("UserActivation")}} interface indicates whether the current window has transient user activation (see {{Glossary("transient activation")}}).
+The read-only **`isActive`** property of the {{domxref("UserActivation")}} interface indicates whether the current window has {{Glossary("transient activation", "transient user activation")}}.
## Value
diff --git a/files/en-us/web/api/userproximityevent/index.md b/files/en-us/web/api/userproximityevent/index.md
deleted file mode 100644
index ffc06af1c629b6b..000000000000000
--- a/files/en-us/web/api/userproximityevent/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: UserProximityEvent
-slug: Web/API/UserProximityEvent
-page-type: web-api-interface
-status:
- - deprecated
- - non-standard
-browser-compat: api.UserProximityEvent
----
-
-{{APIRef("Proximity Events")}}{{Deprecated_Header}}{{Non-standard_Header}}
-
-> **Warning:** `UserProximityEvent` is not supported by any current major browser, and should not be used.
-
-The **`UserProximityEvent`** indicates whether a nearby physical object is present by using the proximity sensor of a device.
-
-## Instance properties
-
-- `UserProximityEvent.near` {{Deprecated_Inline}} {{Non-standard_Inline}}
- - : Indicates if the device has sensed a nearby physical object.
-
-## Examples
-
-```js
-window.addEventListener("userproximity", (event) => {
- // if not near, power off the screen
- navigator.mozPower.screenEnabled = !event.near;
-});
-```
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [Proximity Events](/en-US/docs/Web/API/Proximity_Events)
-- {{domxref("DeviceProximityEvent")}}
diff --git a/files/en-us/web/api/validitystate/badinput/index.md b/files/en-us/web/api/validitystate/badinput/index.md
index ed72d1496753666..fbca2108e204fda 100644
--- a/files/en-us/web/api/validitystate/badinput/index.md
+++ b/files/en-us/web/api/validitystate/badinput/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.badInput
+title: "ValidityState: badInput property"
+short-title: badInput
slug: Web/API/ValidityState/badInput
page-type: web-api-instance-property
browser-compat: api.ValidityState.badInput
diff --git a/files/en-us/web/api/validitystate/patternmismatch/index.md b/files/en-us/web/api/validitystate/patternmismatch/index.md
index ecb5fef04e38208..687f592e1a84ece 100644
--- a/files/en-us/web/api/validitystate/patternmismatch/index.md
+++ b/files/en-us/web/api/validitystate/patternmismatch/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.patternMismatch
+title: "ValidityState: patternMismatch property"
+short-title: patternMismatch
slug: Web/API/ValidityState/patternMismatch
page-type: web-api-instance-property
browser-compat: api.ValidityState.patternMismatch
@@ -76,4 +77,4 @@ Note, in this case, we get a `patternMismatch` not a {{domxref('validityState.to
- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)
- [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation)
-- [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+- [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions)
diff --git a/files/en-us/web/api/validitystate/rangeoverflow/index.md b/files/en-us/web/api/validitystate/rangeoverflow/index.md
index 4d300b8e890d40b..a100b7d9a48217b 100644
--- a/files/en-us/web/api/validitystate/rangeoverflow/index.md
+++ b/files/en-us/web/api/validitystate/rangeoverflow/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.rangeOverflow
+title: "ValidityState: rangeOverflow property"
+short-title: rangeOverflow
slug: Web/API/ValidityState/rangeOverflow
page-type: web-api-instance-property
browser-compat: api.ValidityState.rangeOverflow
diff --git a/files/en-us/web/api/validitystate/rangeunderflow/index.md b/files/en-us/web/api/validitystate/rangeunderflow/index.md
index 8f90d12dc062450..4a2ea68c2a2c0be 100644
--- a/files/en-us/web/api/validitystate/rangeunderflow/index.md
+++ b/files/en-us/web/api/validitystate/rangeunderflow/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.rangeUnderflow
+title: "ValidityState: rangeUnderflow property"
+short-title: rangeUnderflow
slug: Web/API/ValidityState/rangeUnderflow
page-type: web-api-instance-property
browser-compat: api.ValidityState.rangeUnderflow
diff --git a/files/en-us/web/api/validitystate/stepmismatch/index.md b/files/en-us/web/api/validitystate/stepmismatch/index.md
index 366b138a431e8ba..f5b72ab559c885d 100644
--- a/files/en-us/web/api/validitystate/stepmismatch/index.md
+++ b/files/en-us/web/api/validitystate/stepmismatch/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.stepMismatch
+title: "ValidityState: stepMismatch property"
+short-title: stepMismatch
slug: Web/API/ValidityState/stepMismatch
page-type: web-api-instance-property
browser-compat: api.ValidityState.stepMismatch
diff --git a/files/en-us/web/api/validitystate/toolong/index.md b/files/en-us/web/api/validitystate/toolong/index.md
index 7807e85a8124336..8c9f3fec04054eb 100644
--- a/files/en-us/web/api/validitystate/toolong/index.md
+++ b/files/en-us/web/api/validitystate/toolong/index.md
@@ -1,5 +1,6 @@
---
-title: validityState.tooLong
+title: "ValidityState: tooLong property"
+short-title: tooLong
slug: Web/API/ValidityState/tooLong
page-type: web-api-instance-property
browser-compat: api.ValidityState.tooLong
diff --git a/files/en-us/web/api/validitystate/tooshort/index.md b/files/en-us/web/api/validitystate/tooshort/index.md
index 8efa212405f2d2a..feebfe44d2f33e2 100644
--- a/files/en-us/web/api/validitystate/tooshort/index.md
+++ b/files/en-us/web/api/validitystate/tooshort/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.tooShort
+title: "ValidityState: tooShort property"
+short-title: tooShort
slug: Web/API/ValidityState/tooShort
page-type: web-api-instance-property
browser-compat: api.ValidityState.tooShort
diff --git a/files/en-us/web/api/validitystate/typemismatch/index.md b/files/en-us/web/api/validitystate/typemismatch/index.md
index 4bc87242d9a7215..01985d530d3a5d5 100644
--- a/files/en-us/web/api/validitystate/typemismatch/index.md
+++ b/files/en-us/web/api/validitystate/typemismatch/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.typeMismatch
+title: "ValidityState: typeMismatch property"
+short-title: typeMismatch
slug: Web/API/ValidityState/typeMismatch
page-type: web-api-instance-property
browser-compat: api.ValidityState.typeMismatch
@@ -63,4 +64,4 @@ The `typeMismatch` occurs when there is a disconnect between the [`value`](/en-U
- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)
- [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation)
-- [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+- [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions)
diff --git a/files/en-us/web/api/validitystate/valuemissing/index.md b/files/en-us/web/api/validitystate/valuemissing/index.md
index 2540d131a1783db..ac8849b939382bd 100644
--- a/files/en-us/web/api/validitystate/valuemissing/index.md
+++ b/files/en-us/web/api/validitystate/valuemissing/index.md
@@ -1,5 +1,6 @@
---
-title: ValidityState.valueMissing
+title: "ValidityState: valueMissing property"
+short-title: valueMissing
slug: Web/API/ValidityState/valueMissing
page-type: web-api-instance-property
browser-compat: api.ValidityState.valueMissing
@@ -23,4 +24,4 @@ If the `required` attribute is set, and no {{HTMLElement("option")}} is selected
- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)
- [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation)
-- [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
+- [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions)
diff --git a/files/en-us/web/api/vibration_api/index.md b/files/en-us/web/api/vibration_api/index.md
index 9eb9d539df42bc4..d3ebd7659dd9487 100644
--- a/files/en-us/web/api/vibration_api/index.md
+++ b/files/en-us/web/api/vibration_api/index.md
@@ -18,8 +18,8 @@ Vibration is described as a pattern of on-off pulses, which may be of varying le
You may pulse the vibration hardware one time by specifying either a single value or an array consisting of only one value:
```js
-window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
+navigator.vibrate(200);
+navigator.vibrate([200]);
```
Both of these examples vibrate the device for 200 ms.
@@ -29,7 +29,7 @@ Both of these examples vibrate the device for 200 ms.
An array of values describes alternating periods in which the device is vibrating and not vibrating. Each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseconds it should not be vibrating. For example:
```js
-window.navigator.vibrate([200, 100, 200]);
+navigator.vibrate([200, 100, 200]);
```
This vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms.
diff --git a/files/en-us/web/api/videocolorspace/fullrange/index.md b/files/en-us/web/api/videocolorspace/fullrange/index.md
index 8e4d05f45cd697d..5c2873a175ec45d 100644
--- a/files/en-us/web/api/videocolorspace/fullrange/index.md
+++ b/files/en-us/web/api/videocolorspace/fullrange/index.md
@@ -1,5 +1,6 @@
---
-title: VideoColorSpace.fullRange
+title: "VideoColorSpace: fullRange property"
+short-title: fullRange
slug: Web/API/VideoColorSpace/fullRange
page-type: web-api-instance-property
browser-compat: api.VideoColorSpace.fullRange
diff --git a/files/en-us/web/api/videocolorspace/index.md b/files/en-us/web/api/videocolorspace/index.md
index f826ae9a82eae39..a0c1ae36dfa5868 100644
--- a/files/en-us/web/api/videocolorspace/index.md
+++ b/files/en-us/web/api/videocolorspace/index.md
@@ -11,7 +11,7 @@ The **`VideoColorSpace`** interface of the {{domxref('WebCodecs API','','',' ')}
## Constructor
-- {{domxref("VideoColorSpace.VideoColorSpace", "VideoColorSpace()")}} {{Experimental_Inline}}
+- {{domxref("VideoColorSpace.VideoColorSpace", "VideoColorSpace()")}}
- : Creates a new `VideoColorSpace` object.
## Instance properties
diff --git a/files/en-us/web/api/videocolorspace/matrix/index.md b/files/en-us/web/api/videocolorspace/matrix/index.md
index c004e2692dc1e50..6676585152c4b6e 100644
--- a/files/en-us/web/api/videocolorspace/matrix/index.md
+++ b/files/en-us/web/api/videocolorspace/matrix/index.md
@@ -1,5 +1,6 @@
---
-title: VideoColorSpace.matrix
+title: "VideoColorSpace: matrix property"
+short-title: matrix
slug: Web/API/VideoColorSpace/matrix
page-type: web-api-instance-property
browser-compat: api.VideoColorSpace.matrix
diff --git a/files/en-us/web/api/videocolorspace/primaries/index.md b/files/en-us/web/api/videocolorspace/primaries/index.md
index e3ea1755e282f82..79739a673a9c2be 100644
--- a/files/en-us/web/api/videocolorspace/primaries/index.md
+++ b/files/en-us/web/api/videocolorspace/primaries/index.md
@@ -1,5 +1,6 @@
---
-title: VideoColorSpace.primaries
+title: "VideoColorSpace: primaries property"
+short-title: primaries
slug: Web/API/VideoColorSpace/primaries
page-type: web-api-instance-property
browser-compat: api.VideoColorSpace.primaries
diff --git a/files/en-us/web/api/videocolorspace/tojson/index.md b/files/en-us/web/api/videocolorspace/tojson/index.md
index aec45cc716517e7..286f0233729b5f7 100644
--- a/files/en-us/web/api/videocolorspace/tojson/index.md
+++ b/files/en-us/web/api/videocolorspace/tojson/index.md
@@ -1,5 +1,6 @@
---
-title: VideoColorSpace.toJSON()
+title: "VideoColorSpace: toJSON() method"
+short-title: toJSON()
slug: Web/API/VideoColorSpace/toJSON
page-type: web-api-instance-method
browser-compat: api.VideoColorSpace.toJSON
diff --git a/files/en-us/web/api/videocolorspace/transfer/index.md b/files/en-us/web/api/videocolorspace/transfer/index.md
index 113a410b12a3b0f..21ba140df415879 100644
--- a/files/en-us/web/api/videocolorspace/transfer/index.md
+++ b/files/en-us/web/api/videocolorspace/transfer/index.md
@@ -1,5 +1,6 @@
---
-title: VideoColorSpace.transfer
+title: "VideoColorSpace: transfer property"
+short-title: transfer
slug: Web/API/VideoColorSpace/transfer
page-type: web-api-instance-property
browser-compat: api.VideoColorSpace.transfer
diff --git a/files/en-us/web/api/videocolorspace/videocolorspace/index.md b/files/en-us/web/api/videocolorspace/videocolorspace/index.md
index d5d01879fba7330..69dbf7bb36019a4 100644
--- a/files/en-us/web/api/videocolorspace/videocolorspace/index.md
+++ b/files/en-us/web/api/videocolorspace/videocolorspace/index.md
@@ -1,13 +1,12 @@
---
-title: VideoColorSpace()
+title: "VideoColorSpace: VideoColorSpace() constructor"
+short-title: VideoColorSpace()
slug: Web/API/VideoColorSpace/VideoColorSpace
page-type: web-api-constructor
-status:
- - experimental
browser-compat: api.VideoColorSpace.VideoColorSpace
---
-{{APIRef("WebCodecs API")}}{{SeeCompatTable}}
+{{APIRef("WebCodecs API")}}
The **`VideoColorSpace()`** constructor creates a new {{domxref("VideoColorSpace")}} object which represents a video color space.
diff --git a/files/en-us/web/api/videodecoder/close/index.md b/files/en-us/web/api/videodecoder/close/index.md
index ee1407d23ccf84a..197bc9e9174b331 100644
--- a/files/en-us/web/api/videodecoder/close/index.md
+++ b/files/en-us/web/api/videodecoder/close/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.close()
+title: "VideoDecoder: close() method"
+short-title: close()
slug: Web/API/VideoDecoder/close
page-type: web-api-instance-method
browser-compat: api.VideoDecoder.close
diff --git a/files/en-us/web/api/videodecoder/configure/index.md b/files/en-us/web/api/videodecoder/configure/index.md
index 980e897ca19c0eb..6f395cc67aca39b 100644
--- a/files/en-us/web/api/videodecoder/configure/index.md
+++ b/files/en-us/web/api/videodecoder/configure/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.configure()
+title: "VideoDecoder: configure() method"
+short-title: configure()
slug: Web/API/VideoDecoder/configure
page-type: web-api-instance-method
browser-compat: api.VideoDecoder.configure
@@ -20,7 +21,7 @@ configure(config)
- `config`
- : An object containing the following members:
- `codec`
- - : A string containing a [valid codec string](https://www.w3.org/TR/webcodecs-codec-registry/#video-codec-registry).
+ - : A string containing a [valid codec string](https://www.w3.org/TR/webcodecs-codec-registry/#video-codec-registry). See ["codecs" parameter](/en-US/docs/Web/Media/Formats/codecs_parameter#codec_options_by_container) for details on codec string construction.
- `description` {{optional_inline}}
- : An {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, or a {{jsxref("DataView")}} containing a sequence of codec specific bytes, commonly known as extradata.
- `codedWidth` {{optional_inline}}
diff --git a/files/en-us/web/api/videodecoder/decode/index.md b/files/en-us/web/api/videodecoder/decode/index.md
index 0f67659e4b173a2..bc2df1a5a4e3667 100644
--- a/files/en-us/web/api/videodecoder/decode/index.md
+++ b/files/en-us/web/api/videodecoder/decode/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.decode()
+title: "VideoDecoder: decode() method"
+short-title: decode()
slug: Web/API/VideoDecoder/decode
page-type: web-api-instance-method
browser-compat: api.VideoDecoder.decode
@@ -40,6 +41,7 @@ const responses = await downloadVideoChunksFromServer(timestamp);
for (const response of responses) {
const chunk = new EncodedVideoChunk({
timestamp: response.timestamp,
+ type: response.key ? "key" : "delta",
data: new Uint8Array(response.body),
});
decoder.decode(chunk);
diff --git a/files/en-us/web/api/videodecoder/decodequeuesize/index.md b/files/en-us/web/api/videodecoder/decodequeuesize/index.md
index 69c7dd220085a7e..28fbe4511c92fdc 100644
--- a/files/en-us/web/api/videodecoder/decodequeuesize/index.md
+++ b/files/en-us/web/api/videodecoder/decodequeuesize/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.decodeQueueSize
+title: "VideoDecoder: decodeQueueSize property"
+short-title: decodeQueueSize
slug: Web/API/VideoDecoder/decodeQueueSize
page-type: web-api-instance-property
browser-compat: api.VideoDecoder.decodeQueueSize
diff --git a/files/en-us/web/api/videodecoder/dequeue_event/index.md b/files/en-us/web/api/videodecoder/dequeue_event/index.md
index 56196ac513058d0..a53700da054e169 100644
--- a/files/en-us/web/api/videodecoder/dequeue_event/index.md
+++ b/files/en-us/web/api/videodecoder/dequeue_event/index.md
@@ -1,5 +1,6 @@
---
title: "VideoDecoder: dequeue event"
+short-title: dequeue
slug: Web/API/VideoDecoder/dequeue_event
page-type: web-api-event
browser-compat: api.VideoDecoder.dequeue_event
@@ -9,7 +10,7 @@ browser-compat: api.VideoDecoder.dequeue_event
The **`dequeue`** event of the {{domxref("VideoDecoder")}} interface fires to signal a decrease in {{domxref("VideoDecoder.decodeQueueSize")}}.
-This eliminates the need for developers to use a {{domxref("setTimeout", "setTimeout()")}} poll to determine when the queue has decreased, and more work should be queued up.
+This eliminates the need for developers to use a {{domxref("setTimeout()")}} poll to determine when the queue has decreased, and more work should be queued up.
## Syntax
diff --git a/files/en-us/web/api/videodecoder/flush/index.md b/files/en-us/web/api/videodecoder/flush/index.md
index 608181bdedc297e..6904bec0ff8f531 100644
--- a/files/en-us/web/api/videodecoder/flush/index.md
+++ b/files/en-us/web/api/videodecoder/flush/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.flush()
+title: "VideoDecoder: flush() method"
+short-title: flush()
slug: Web/API/VideoDecoder/flush
page-type: web-api-instance-method
browser-compat: api.VideoDecoder.flush
diff --git a/files/en-us/web/api/videodecoder/index.md b/files/en-us/web/api/videodecoder/index.md
index 2d60236410a26ab..a24710a3d1fb25f 100644
--- a/files/en-us/web/api/videodecoder/index.md
+++ b/files/en-us/web/api/videodecoder/index.md
@@ -21,9 +21,12 @@ The **`VideoDecoder`** interface of the {{domxref('WebCodecs API','','','true')}
_Inherits properties from its parent, {{DOMxRef("EventTarget")}}._
- {{domxref("VideoDecoder.decodeQueueSize")}} {{ReadOnlyInline}}
- - : An integer representing the number of decode queue requests.
+ - : An integer representing the number of queued decode requests.
- {{domxref("VideoDecoder.state")}} {{ReadOnlyInline}}
- - : Indicates whether the underlying codec is configured for decoding.
+ - : Indicates the current state of decoder. Possible values are:
+ - `"unconfigured"`
+ - `"configured"`
+ - `"closed"`
### Events
@@ -32,7 +35,7 @@ _Inherits properties from its parent, {{DOMxRef("EventTarget")}}._
## Static methods
-- {{domxref("VideoDecoder.isConfigSupported()")}}
+- {{domxref("VideoDecoder.isConfigSupported_static", "VideoDecoder.isConfigSupported()")}}
- : Returns a promise indicating whether the provided `VideoDecoderConfig` is supported.
## Instance methods
@@ -60,4 +63,5 @@ _Inherits methods from its parent, {{DOMxRef("EventTarget")}}._
## See also
-[Video processing with WebCodecs](https://web.dev/webcodecs/)
+- [Video processing with WebCodecs](https://developer.chrome.com/docs/web-platform/best-practices/webcodecs)
+- [WebCodecs API Samples](https://w3c.github.io/webcodecs/samples/)
diff --git a/files/en-us/web/api/videodecoder/isconfigsupported/index.md b/files/en-us/web/api/videodecoder/isconfigsupported/index.md
deleted file mode 100644
index 6c79bc66ed3829a..000000000000000
--- a/files/en-us/web/api/videodecoder/isconfigsupported/index.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: VideoDecoder.isConfigSupported()
-slug: Web/API/VideoDecoder/isConfigSupported
-page-type: web-api-static-method
-browser-compat: api.VideoDecoder.isConfigSupported
----
-
-{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-
-The **`isConfigSupported()`** static method of the {{domxref("VideoDecoder")}} interface checks if the given config is supported (that is, if {{domxref("VideoDecoder")}} objects can be successfully configured with the given config).
-
-## Syntax
-
-```js-nolint
-isConfigSupported(config)
-```
-
-### Parameters
-
-- `config`
- - : The dictionary object accepted by {{domxref("VideoDecoder.configure")}}
-
-### Return value
-
-A {{jsxref("Promise")}} that resolves with an object containing the following members:
-
-- `supported`
- - : A boolean value which is `true` if the given config is supported by the decoder.
-- `config`
- - : A copy of the given config with all the fields recognized by the decoder.
-
-### Exceptions
-
-- {{jsxref("TypeError")}}
- - : Thrown if the provided `config` is invalid; that is, if doesn't have required values (such as an empty `codec` field) or has invalid values (such as a negative `codedWidth`).
-
-## Examples
-
-The following example tests if the browser supports accelerated and un-accelerated
-versions of several video codecs.
-
-```js
-const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"];
-const accelerations = ["prefer-hardware", "prefer-software"];
-
-const configs = [];
-for (const codec of codecs) {
- for (const acceleration of accelerations) {
- configs.push({
- codec,
- hardwareAcceleration: acceleration,
- codedWidth: 1280,
- codedHeight: 720,
- not_supported_field: 123,
- });
- }
-}
-
-for (const config of configs) {
- const support = await VideoDecoder.isConfigSupported(config);
- console.log(
- `VideoDecoder's config ${JSON.stringify(support.config)} support: ${
- support.supported
- }`
- );
-}
-```
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
diff --git a/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md b/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md
new file mode 100644
index 000000000000000..6a5b15854299c8f
--- /dev/null
+++ b/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md
@@ -0,0 +1,76 @@
+---
+title: "VideoDecoder: isConfigSupported() static method"
+short-title: isConfigSupported()
+slug: Web/API/VideoDecoder/isConfigSupported_static
+page-type: web-api-static-method
+browser-compat: api.VideoDecoder.isConfigSupported_static
+---
+
+{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
+
+The **`isConfigSupported()`** static method of the {{domxref("VideoDecoder")}} interface checks if the given config is supported (that is, if {{domxref("VideoDecoder")}} objects can be successfully configured with the given config).
+
+## Syntax
+
+```js-nolint
+VideoDecoder.isConfigSupported(config)
+```
+
+### Parameters
+
+- `config`
+ - : The dictionary object accepted by {{domxref("VideoDecoder.configure")}}
+
+### Return value
+
+A {{jsxref("Promise")}} that resolves with an object containing the following members:
+
+- `supported`
+ - : A boolean value which is `true` if the given config is supported by the decoder.
+- `config`
+ - : A copy of the given config with all the fields recognized by the decoder.
+
+### Exceptions
+
+- {{jsxref("TypeError")}}
+ - : Thrown if the provided `config` is invalid; that is, if doesn't have required values (such as an empty `codec` field) or has invalid values (such as a negative `codedWidth`).
+
+## Examples
+
+The following example tests if the browser supports accelerated and un-accelerated
+versions of several video codecs.
+
+```js
+const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"];
+const accelerations = ["prefer-hardware", "prefer-software"];
+
+const configs = [];
+for (const codec of codecs) {
+ for (const acceleration of accelerations) {
+ configs.push({
+ codec,
+ hardwareAcceleration: acceleration,
+ codedWidth: 1280,
+ codedHeight: 720,
+ not_supported_field: 123,
+ });
+ }
+}
+
+for (const config of configs) {
+ const support = await VideoDecoder.isConfigSupported(config);
+ console.log(
+ `VideoDecoder's config ${JSON.stringify(support.config)} support: ${
+ support.supported
+ }`,
+ );
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/videodecoder/reset/index.md b/files/en-us/web/api/videodecoder/reset/index.md
index 105716bee87fc52..0f7416a38859671 100644
--- a/files/en-us/web/api/videodecoder/reset/index.md
+++ b/files/en-us/web/api/videodecoder/reset/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.reset()
+title: "VideoDecoder: reset() method"
+short-title: reset()
slug: Web/API/VideoDecoder/reset
page-type: web-api-instance-method
browser-compat: api.VideoDecoder.reset
diff --git a/files/en-us/web/api/videodecoder/state/index.md b/files/en-us/web/api/videodecoder/state/index.md
index 6755ff17f88361f..4054e805df4fe01 100644
--- a/files/en-us/web/api/videodecoder/state/index.md
+++ b/files/en-us/web/api/videodecoder/state/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder.state
+title: "VideoDecoder: state property"
+short-title: state
slug: Web/API/VideoDecoder/state
page-type: web-api-instance-property
browser-compat: api.VideoDecoder.state
diff --git a/files/en-us/web/api/videodecoder/videodecoder/index.md b/files/en-us/web/api/videodecoder/videodecoder/index.md
index 3a4516786093643..072261b07418675 100644
--- a/files/en-us/web/api/videodecoder/videodecoder/index.md
+++ b/files/en-us/web/api/videodecoder/videodecoder/index.md
@@ -1,5 +1,6 @@
---
-title: VideoDecoder()
+title: "VideoDecoder: VideoDecoder() constructor"
+short-title: VideoDecoder()
slug: Web/API/VideoDecoder/VideoDecoder
page-type: web-api-constructor
browser-compat: api.VideoDecoder.VideoDecoder
diff --git a/files/en-us/web/api/videoencoder/close/index.md b/files/en-us/web/api/videoencoder/close/index.md
index f88a5d1ab63a9e9..a835cfcd7cd320a 100644
--- a/files/en-us/web/api/videoencoder/close/index.md
+++ b/files/en-us/web/api/videoencoder/close/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.close()
+title: "VideoEncoder: close() method"
+short-title: close()
slug: Web/API/VideoEncoder/close
page-type: web-api-instance-method
browser-compat: api.VideoEncoder.close
diff --git a/files/en-us/web/api/videoencoder/configure/index.md b/files/en-us/web/api/videoencoder/configure/index.md
index c0d4f4e441a5afa..8bc62b2c7257624 100644
--- a/files/en-us/web/api/videoencoder/configure/index.md
+++ b/files/en-us/web/api/videoencoder/configure/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.configure()
+title: "VideoEncoder: configure() method"
+short-title: configure()
slug: Web/API/VideoEncoder/configure
page-type: web-api-instance-method
browser-compat: api.VideoEncoder.configure
@@ -7,7 +8,9 @@ browser-compat: api.VideoEncoder.configure
{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-The **`configure()`** method of the {{domxref("VideoEncoder")}} interface enqueues a control message to configure the video encoder for encoding chunks.
+The **`configure()`** method of the {{domxref("VideoEncoder")}} interface changes the {{domxref("VideoEncoder.state", "state")}} of the encoder to "configured" and asynchronously prepares the encoder to accept {{domxref("VideoEncoder")}}s for encoding with the specified parameters. If the encoder doesn't support the specified parameters or can't be initialized for other reasons an error will be reported via the error callback provided to the {{domxref("VideoEncoder")}} constructor.
+
+If the {{domxref("VideoEncoder")}} has been previously configured, the new configuration will not be applied until all previous tasks have completed.
## Syntax
@@ -20,7 +23,7 @@ configure(config)
- `config`
- : A dictionary object containing the following members:
- `codec`
- - : A string containing a [valid codec string](https://www.w3.org/TR/webcodecs-codec-registry/#audio-codec-registry).
+ - : A string containing a [valid codec string](https://www.w3.org/TR/webcodecs-codec-registry/#audio-codec-registry). See ["codecs" parameter](/en-US/docs/Web/Media/Formats/codecs_parameter#codec_options_by_container) for details on codec string construction.
- `width` {{optional_inline}}
- : An integer representing the width of each output {{domxref("EncodedVideoChunk")}} in pixels, before any ratio adjustments.
- `height` {{optional_inline}}
@@ -44,14 +47,20 @@ configure(config)
- `"keep"`
- `scalabilityMode`
- : A string containing an encoding scalability mode identifier as defined in [WebRTC](https://w3c.github.io/webrtc-svc/#scalabilitymodes*).
- - `bitrateMode`
+ - `bitrateMode` {{optional_inline}}
- : A string containing a bitrate mode. One of:
- `"constant"`
+ - : The encoder will target constant bitrate.
- `"variable"` (default)
- - `latencyMode`
+ - : The encoder will target a variable bitrate, allowing more space to be used for complex signals and less space for less complex signals.
+ - `"quantizer"`
+ - : The encoder will disregard the `bitrate` option and instead it will use codec-specific quantizer values specified for each frame in the `options` parameter to {{domxref("VideoEncoder.encode()")}}.
+ - `latencyMode` {{optional_inline}}
- : A string containing a value that configures the latency behavior of this codec. One of:
- `"quality"` (default)
+ - : The encoder should optimize for encoding quality.
- `"realtime"`
+ - : The encoder should optimize for low latency and may even drop frames to honor `framerate`.
### Return value
diff --git a/files/en-us/web/api/videoencoder/dequeue_event/index.md b/files/en-us/web/api/videoencoder/dequeue_event/index.md
index 8d8722cc4967b1d..9b056cc5dffd01a 100644
--- a/files/en-us/web/api/videoencoder/dequeue_event/index.md
+++ b/files/en-us/web/api/videoencoder/dequeue_event/index.md
@@ -1,5 +1,6 @@
---
title: "VideoEncoder: dequeue event"
+short-title: dequeue
slug: Web/API/VideoEncoder/dequeue_event
page-type: web-api-event
browser-compat: api.VideoEncoder.dequeue_event
@@ -9,7 +10,7 @@ browser-compat: api.VideoEncoder.dequeue_event
The **`dequeue`** event of the {{domxref("VideoEncoder")}} interface fires to signal a decrease in {{domxref("VideoEncoder.encodeQueueSize")}}.
-This eliminates the need for developers to use a {{domxref("setTimeout", "setTimeout()")}} poll to determine when the queue has decreased, and more work should be queued up.
+This eliminates the need for developers to use a {{domxref("setTimeout()")}} poll to determine when the queue has decreased, and more work should be queued up.
## Syntax
diff --git a/files/en-us/web/api/videoencoder/encode/index.md b/files/en-us/web/api/videoencoder/encode/index.md
index c60facd806e6d1b..e9ad1a9e2efdb3e 100644
--- a/files/en-us/web/api/videoencoder/encode/index.md
+++ b/files/en-us/web/api/videoencoder/encode/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.encode()
+title: "VideoEncoder: encode() method"
+short-title: encode()
slug: Web/API/VideoEncoder/encode
page-type: web-api-instance-method
browser-compat: api.VideoEncoder.encode
@@ -7,7 +8,8 @@ browser-compat: api.VideoEncoder.encode
{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-The **`encode()`** method of the {{domxref("VideoEncoder")}} interface enqueues a control message to encode a given {{domxref("VideoFrame")}}.
+The **`encode()`** method of the {{domxref("VideoEncoder")}} interface asynchronously encodes a {{domxref("VideoFrame")}}.
+Encoded data ({{domxref("EncodedVideoChunk")}}) or an error will eventually be returned via the callbacks provided to the {{domxref("VideoEncoder")}} constructor.
## Syntax
@@ -21,9 +23,21 @@ encode(frame, options)
- `frame`
- : A {{domxref("VideoFrame")}} object.
- `options` {{optional_inline}}
- - : An object containing the following member:
- - `keyFrame`
+ - : An object containing the following members:
+ - `keyFrame` {{optional_inline}}
- : A {{jsxref("boolean")}}, defaulting to `false` giving the user agent flexibility to decide if this frame should be encoded as a key frame. If `true` this indicates that the given frame must be encoded as a key frame.
+ - `vp9` {{optional_inline}}
+ - : Encode options for the [VP9](/en-US/docs/Web/Media/Formats/Video_codecs#vp9) codec.
+ - `quantizer`
+ - : Frame quantizer value 0 to 63. Only effective if {{domxref("VideoEncoder")}} was configured with `quantizer` bitrate mode.
+ - `av1` {{optional_inline}}
+ - : Encode options for the [AV1](/en-US/docs/Web/Media/Formats/Video_codecs#av1) codec.
+ - `quantizer`
+ - : Frame quantizer value 0 to 63. Only effective if {{domxref("VideoEncoder")}} was configured with `quantizer` bitrate mode.
+ - `avc` {{optional_inline}}
+ - : Encode options for the [AVC (H.264)](/en-US/docs/Web/Media/Formats/Video_codecs#avc_h.264) codec.
+ - `quantizer`
+ - : Frame quantizer value 0 to 51. Only effective if {{domxref("VideoEncoder")}} was configured with `quantizer` bitrate mode.
### Return value
@@ -44,6 +58,34 @@ In the following example `encode` is passed a `VideoFrame`, and the options para
encoder.encode(frame, { keyFrame: true });
```
+Setting per-frame QP value for encoding individual frames.
+
+```js
+const encoder = new VideoEncoder(init);
+const encoderConfig = {
+ codec: "vp09.00.10.08",
+ width: 800,
+ height: 600,
+ bitrateMode: "quantizer",
+ framerate: 30,
+ latencyMode: "realtime",
+};
+encoder.configure(encoderConfig);
+
+const encodeOptions = { keyFrame: false };
+const qp = calculateQp(codec, frame);
+
+if (codec.includes("vp09")) {
+ encodeOptions.vp9 = { quantizer: qp };
+} else if (codec.includes("av01")) {
+ encodeOptions.av1 = { quantizer: qp };
+} else if (codec.includes("avc")) {
+ encodeOptions.avc = { quantizer: qp };
+}
+
+encoder.encode(frame, encodeOptions);
+```
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/api/videoencoder/encodequeuesize/index.md b/files/en-us/web/api/videoencoder/encodequeuesize/index.md
index 622908b04d69a1c..49814d44677887b 100644
--- a/files/en-us/web/api/videoencoder/encodequeuesize/index.md
+++ b/files/en-us/web/api/videoencoder/encodequeuesize/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.encodeQueueSize
+title: "VideoEncoder: encodeQueueSize property"
+short-title: encodeQueueSize
slug: Web/API/VideoEncoder/encodeQueueSize
page-type: web-api-instance-property
browser-compat: api.VideoEncoder.encodeQueueSize
diff --git a/files/en-us/web/api/videoencoder/flush/index.md b/files/en-us/web/api/videoencoder/flush/index.md
index 1277c3b068a5e5a..1e04130431055d0 100644
--- a/files/en-us/web/api/videoencoder/flush/index.md
+++ b/files/en-us/web/api/videoencoder/flush/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.flush()
+title: "VideoEncoder: flush() method"
+short-title: flush()
slug: Web/API/VideoEncoder/flush
page-type: web-api-instance-method
browser-compat: api.VideoEncoder.flush
@@ -7,7 +8,7 @@ browser-compat: api.VideoEncoder.flush
{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-The **`flush()`** method of the {{domxref("VideoEncoder")}} interface returns a Promise that resolves once all pending messages in the queue have been completed.
+The **`flush()`** method of the {{domxref("VideoEncoder")}} interface forces all pending encodes to complete.
## Syntax
@@ -21,7 +22,7 @@ None.
### Return value
-A {{jsxref("Promise")}} that resolves with undefined.
+A {{jsxref("Promise")}} that resolves once the encoder's initialization is completed and all pending {{domxref("EncodedVideoChunk")}}s are returned.
### Exceptions
diff --git a/files/en-us/web/api/videoencoder/index.md b/files/en-us/web/api/videoencoder/index.md
index df6510a88859f6b..1030ab647daa16b 100644
--- a/files/en-us/web/api/videoencoder/index.md
+++ b/files/en-us/web/api/videoencoder/index.md
@@ -7,7 +7,7 @@ browser-compat: api.VideoEncoder
{{APIRef("WebCodecs API")}}
-The **`VideoEncoder`** interface of the {{domxref('WebCodecs API','','','true')}} encodes {{domxref("VideoFrame")}} objects.
+The **`VideoEncoder`** interface of the {{domxref('WebCodecs API', '', '', 1)}} encodes {{domxref("VideoFrame")}} objects into {{domxref("EncodedVideoChunk")}}s.
{{InheritanceDiagram}}
@@ -32,7 +32,7 @@ _Inherits properties from its parent, {{DOMxRef("EventTarget")}}._
## Static methods
-- {{domxref("VideoEncoder.isConfigSupported()")}}
+- {{domxref("VideoEncoder.isConfigSupported_static", "VideoEncoder.isConfigSupported()")}}
- : Returns a promise indicating whether the provided `VideoEncoderConfig` is supported.
## Instance methods
@@ -40,13 +40,13 @@ _Inherits properties from its parent, {{DOMxRef("EventTarget")}}._
_Inherits methods from its parent, {{DOMxRef("EventTarget")}}._
- {{domxref("VideoEncoder.configure()")}}
- - : Enqueues a control message to configure the video encoder for encoding chunks.
+ - : Asynchronously prepares the encoder to accept video frames for encoding with the specified parameters.
- {{domxref("VideoEncoder.encode()")}}
- - : Enqueues a control message to encode a given {{domxref("VideoFrame")}}.
+ - : Asynchronously encodes a {{domxref("VideoFrame")}}.
- {{domxref("VideoEncoder.flush()")}}
- - : Returns a promise that resolves once all pending messages in the queue have been completed.
+ - : Returns a promise that resolves once all pending encodes have been completed.
- {{domxref("VideoEncoder.reset()")}}
- - : Resets all states including configuration, control messages in the control message queue, and all pending callbacks.
+ - : Cancels all pending encodes and callbacks.
- {{domxref("VideoEncoder.close()")}}
- : Ends all pending work and releases system resources.
@@ -60,4 +60,4 @@ _Inherits methods from its parent, {{DOMxRef("EventTarget")}}._
## See also
-[Video processing with WebCodecs](https://web.dev/webcodecs/)
+[Video processing with WebCodecs](https://developer.chrome.com/docs/web-platform/best-practices/webcodecs)
diff --git a/files/en-us/web/api/videoencoder/isconfigsupported/index.md b/files/en-us/web/api/videoencoder/isconfigsupported/index.md
deleted file mode 100644
index 36b6d1fc8d4958f..000000000000000
--- a/files/en-us/web/api/videoencoder/isconfigsupported/index.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: VideoEncoder.isConfigSupported()
-slug: Web/API/VideoEncoder/isConfigSupported
-page-type: web-api-static-method
-browser-compat: api.VideoEncoder.isConfigSupported
----
-
-{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-
-The **`isConfigSupported()`** static method of the {{domxref("VideoEncoder")}} interface checks if the given config is supported (that is, if {{domxref("VideoEncoder")}} objects can be successfully configured with the given config).
-
-## Syntax
-
-```js-nolint
-isConfigSupported(config)
-```
-
-### Parameters
-
-- `config`
- - : The dictionary object accepted by {{domxref("VideoEncoder.configure")}}
-
-### Return value
-
-A {{jsxref("Promise")}} that resolves with an object containing the following members:
-
-- `supported`
- - : A boolean value which is `true` if the given config is supported by the encoder.
-- `config`
- - : A copy of the given config with all the fields recognized by the encoder.
-
-### Exceptions
-
-- {{jsxref("TypeError")}}
- - : Thrown if the provided `config` is invalid; that is, if doesn't have required values (such as an empty `codec` field) or has invalid values (such as a negative `width`)
-
-## Examples
-
-The following example tests if the browser supports accelerated and un-accelerated
-versions of several video codecs.
-
-```js
-const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"];
-const accelerations = ["prefer-hardware", "prefer-software"];
-
-const configs = [];
-for (const codec of codecs) {
- for (const acceleration of accelerations) {
- configs.push({
- codec,
- hardwareAcceleration: acceleration,
- width: 1280,
- height: 720,
- bitrate: 2_000_000,
- bitrateMode: "constant",
- framerate: 30,
- not_supported_field: 123,
- });
- }
-}
-
-for (const config of configs) {
- const support = await VideoEncoder.isConfigSupported(config);
- console.log(
- `VideoEncoder's config ${JSON.stringify(support.config)} support: ${
- support.supported
- }`
- );
-}
-```
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
diff --git a/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md b/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md
new file mode 100644
index 000000000000000..901d30a671e1bdd
--- /dev/null
+++ b/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md
@@ -0,0 +1,79 @@
+---
+title: "VideoEncoder: isConfigSupported() static method"
+short-title: isConfigSupported()
+slug: Web/API/VideoEncoder/isConfigSupported_static
+page-type: web-api-static-method
+browser-compat: api.VideoEncoder.isConfigSupported_static
+---
+
+{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
+
+The **`isConfigSupported()`** static method of the {{domxref("VideoEncoder")}} interface checks if {{domxref("VideoEncoder")}} can be successfully configured with the given config.
+
+## Syntax
+
+```js-nolint
+VideoEncoder.isConfigSupported(config)
+```
+
+### Parameters
+
+- `config`
+ - : The dictionary object accepted by {{domxref("VideoEncoder.configure")}}
+
+### Return value
+
+A {{jsxref("Promise")}} that resolves with an object containing the following members:
+
+- `supported`
+ - : A boolean value which is `true` if the given config is supported by the encoder.
+- `config`
+ - : A copy of the given config with all the fields recognized by the encoder.
+
+### Exceptions
+
+- {{jsxref("TypeError")}}
+ - : Thrown if the provided `config` is invalid; that is, if doesn't have required values (such as an empty `codec` field) or has invalid values (such as a negative `width`)
+
+## Examples
+
+The following example tests if the browser supports accelerated and un-accelerated
+versions of several video codecs.
+
+```js
+const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"];
+const accelerations = ["prefer-hardware", "prefer-software"];
+
+const configs = [];
+for (const codec of codecs) {
+ for (const acceleration of accelerations) {
+ configs.push({
+ codec,
+ hardwareAcceleration: acceleration,
+ width: 1280,
+ height: 720,
+ bitrate: 2_000_000,
+ bitrateMode: "constant",
+ framerate: 30,
+ not_supported_field: 123,
+ });
+ }
+}
+
+for (const config of configs) {
+ const support = await VideoEncoder.isConfigSupported(config);
+ console.log(
+ `VideoEncoder's config ${JSON.stringify(support.config)} support: ${
+ support.supported
+ }`,
+ );
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/videoencoder/reset/index.md b/files/en-us/web/api/videoencoder/reset/index.md
index 7fad95e38ae38ed..d223ef544ae7cbe 100644
--- a/files/en-us/web/api/videoencoder/reset/index.md
+++ b/files/en-us/web/api/videoencoder/reset/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.reset()
+title: "VideoEncoder: reset() method"
+short-title: reset()
slug: Web/API/VideoEncoder/reset
page-type: web-api-instance-method
browser-compat: api.VideoEncoder.reset
@@ -7,7 +8,10 @@ browser-compat: api.VideoEncoder.reset
{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-The **`reset()`** method of the {{domxref("VideoEncoder")}} interface resets all states including configuration, control messages in the control message queue, and all pending callbacks.
+The **`reset()`** method of the {{domxref("VideoEncoder")}} interface synchronously cancels all pending encodes and callbacks, frees all underlying resources and sets the {{domxref("VideoEncoder.state", "state")}} to "unconfigured".
+After calling {{domxref("VideoEncoder.reset()", "reset()")}}, {{domxref("VideoEncoder.configure()", "configure()")}} must be called before resuming {{domxref("VideoEncoder.encode()", "encode()")}} calls.
+
+> **Note:** To avoid discarding frames queued via {{domxref("VideoEncoder.encode()", "encode()")}}, {{domxref("VideoEncoder.flush()", "flush()")}} should be called and completed before calling {{domxref("VideoEncoder.reset()", "reset()")}}.
## Syntax
@@ -23,6 +27,11 @@ None.
None ({{jsxref("undefined")}}).
+### Exceptions
+
+- `InvalidStateError` {{domxref("DOMException")}}
+ - : Thrown if the {{domxref("VideoEncoder.state","state")}} is `"closed"`.
+
## Examples
The following example resets the `VideoEncoder`.
diff --git a/files/en-us/web/api/videoencoder/state/index.md b/files/en-us/web/api/videoencoder/state/index.md
index 9d53fd9823c28d2..e4ad460967b8d42 100644
--- a/files/en-us/web/api/videoencoder/state/index.md
+++ b/files/en-us/web/api/videoencoder/state/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder.state
+title: "VideoEncoder: state property"
+short-title: state
slug: Web/API/VideoEncoder/state
page-type: web-api-instance-property
browser-compat: api.VideoEncoder.state
diff --git a/files/en-us/web/api/videoencoder/videoencoder/index.md b/files/en-us/web/api/videoencoder/videoencoder/index.md
index 97cb73b3b97c411..7c6ee981df2c8bf 100644
--- a/files/en-us/web/api/videoencoder/videoencoder/index.md
+++ b/files/en-us/web/api/videoencoder/videoencoder/index.md
@@ -1,5 +1,6 @@
---
-title: VideoEncoder()
+title: "VideoEncoder: VideoEncoder() constructor"
+short-title: VideoEncoder()
slug: Web/API/VideoEncoder/VideoEncoder
page-type: web-api-constructor
browser-compat: api.VideoEncoder.VideoEncoder
@@ -7,7 +8,7 @@ browser-compat: api.VideoEncoder.VideoEncoder
{{APIRef("WebCodecs API")}}{{SecureContext_Header}}
-The **`VideoEncoder()`** constructor creates a new {{domxref("VideoEncoder")}} object with the provided `init.output` callback assigned as the output callback, the provided `init.error` callback as the error callback, and the {{domxref("VideoEncoder.state")}} set to `"unconfigured"`.
+The **`VideoEncoder()`** constructor creates a new {{domxref("VideoEncoder")}} object with the provided `options.output` callback assigned as the output callback, the provided `options.error` callback as the error callback, and sets the {{domxref("VideoEncoder.state")}} to `"unconfigured"`.
## Syntax
@@ -21,7 +22,7 @@ new VideoEncoder(options)
- : An object containing two required callbacks.
- `output`
- : A callback which takes an {{domxref("EncodedVideoChunk")}} object as the first argument, and an optional metadata object as the second. The metadata object has three members:
- - `decoderconfig` {{Optional_Inline}}
+ - `decoderConfig` {{Optional_Inline}}
- : An object containing:
- `codec`
- : A string containing a [valid codec string](https://www.w3.org/TR/webcodecs-codec-registry/#video-codec-registry).
@@ -36,7 +37,7 @@ new VideoEncoder(options)
- `displayAspectHeight` {{Optional_Inline}}
- : An integer representing the vertical dimension of the {{domxref("VideoFrame")}}'s aspect ratio when displayed.
- `colorSpace` {{Optional_Inline}}
- - : An object you pass to the {{domxref("VideoColorSpace")}} constructor as the `init` argument, configuring the {{domxref("VideoFrame.colorSpace")}} for {{domxref("VideoFrame","VideoFrames")}} associated with this `decoderconfig` object. If `colorSpace` exists, the provided values will override any in-band values from the bitstream.
+ - : An object you pass to the {{domxref("VideoColorSpace")}} constructor as the `init` argument, configuring the {{domxref("VideoFrame.colorSpace")}} for {{domxref("VideoFrame","VideoFrames")}} associated with this `decoderConfig` object. If `colorSpace` exists, the provided values will override any in-band values from the bitstream.
- `hardwareAcceleration` {{Optional_Inline}}
- : A string that configures hardware acceleration for this codec. Defaults to `"no-preference"`. Options are:
- `"no-preference"`
@@ -58,8 +59,14 @@ In the following example a `VideoEncoder` is created with the two required callb
```js
const videoEncoder = new VideoEncoder({
- output: processVideo,
- error: onEncoderError,
+ output(chunk, metadata) {
+ console.log(chunk.timestamp);
+ console.log(chunk.byteLength);
+ console.log(JSON.stringify(metadata));
+ },
+ error(error) {
+ console.log(error);
+ },
});
```
diff --git a/files/en-us/web/api/videoframe/allocationsize/index.md b/files/en-us/web/api/videoframe/allocationsize/index.md
index bc1a3615332a97c..999e8f524e7b1d4 100644
--- a/files/en-us/web/api/videoframe/allocationsize/index.md
+++ b/files/en-us/web/api/videoframe/allocationsize/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.allocationSize()
+title: "VideoFrame: allocationSize() method"
+short-title: allocationSize()
slug: Web/API/VideoFrame/allocationSize
page-type: web-api-instance-method
browser-compat: api.VideoFrame.allocationSize
diff --git a/files/en-us/web/api/videoframe/clone/index.md b/files/en-us/web/api/videoframe/clone/index.md
index f0b98436abbf898..6ca98294ee81798 100644
--- a/files/en-us/web/api/videoframe/clone/index.md
+++ b/files/en-us/web/api/videoframe/clone/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.clone()
+title: "VideoFrame: clone() method"
+short-title: clone()
slug: Web/API/VideoFrame/clone
page-type: web-api-instance-method
browser-compat: api.VideoFrame.clone
@@ -7,7 +8,7 @@ browser-compat: api.VideoFrame.clone
{{APIRef("Web Codecs API")}}
-The **`clone()`** method of the {{domxref("VideoFrame")}} interface creates a new `VideoFrame` object with reference to the same media resource as the original.
+The **`clone()`** method of the {{domxref("VideoFrame")}} interface creates a new `VideoFrame` object referencing the same media resource as the original.
## Syntax
@@ -21,7 +22,7 @@ None.
### Return value
-The cloned {{domxref("VideoData")}} object.
+A new cloned {{domxref("VideoFrame")}} object.
### Exceptions
diff --git a/files/en-us/web/api/videoframe/close/index.md b/files/en-us/web/api/videoframe/close/index.md
index b3386aadbf84913..f4e52e842528ad3 100644
--- a/files/en-us/web/api/videoframe/close/index.md
+++ b/files/en-us/web/api/videoframe/close/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.close()
+title: "VideoFrame: close() method"
+short-title: close()
slug: Web/API/VideoFrame/close
page-type: web-api-instance-method
browser-compat: api.VideoFrame.close
diff --git a/files/en-us/web/api/videoframe/codedheight/index.md b/files/en-us/web/api/videoframe/codedheight/index.md
index 92de8a2ff780890..fc0f0adeb36bb15 100644
--- a/files/en-us/web/api/videoframe/codedheight/index.md
+++ b/files/en-us/web/api/videoframe/codedheight/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.codedHeight
+title: "VideoFrame: codedHeight property"
+short-title: codedHeight
slug: Web/API/VideoFrame/codedHeight
page-type: web-api-instance-property
browser-compat: api.VideoFrame.codedHeight
diff --git a/files/en-us/web/api/videoframe/codedrect/index.md b/files/en-us/web/api/videoframe/codedrect/index.md
index a7dc29f22453176..db376da8392cb08 100644
--- a/files/en-us/web/api/videoframe/codedrect/index.md
+++ b/files/en-us/web/api/videoframe/codedrect/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.codedRect
+title: "VideoFrame: codedRect property"
+short-title: codedRect
slug: Web/API/VideoFrame/codedRect
page-type: web-api-instance-property
browser-compat: api.VideoFrame.codedRect
diff --git a/files/en-us/web/api/videoframe/codedwidth/index.md b/files/en-us/web/api/videoframe/codedwidth/index.md
index 81da17332d72ef3..de2229367ebb099 100644
--- a/files/en-us/web/api/videoframe/codedwidth/index.md
+++ b/files/en-us/web/api/videoframe/codedwidth/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.codedWidth
+title: "VideoFrame: codedWidth property"
+short-title: codedWidth
slug: Web/API/VideoFrame/codedWidth
page-type: web-api-instance-property
browser-compat: api.VideoFrame.codedWidth
diff --git a/files/en-us/web/api/videoframe/colorspace/index.md b/files/en-us/web/api/videoframe/colorspace/index.md
index 3b09b6e0bb5c958..b057241b57b8bef 100644
--- a/files/en-us/web/api/videoframe/colorspace/index.md
+++ b/files/en-us/web/api/videoframe/colorspace/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.colorSpace
+title: "VideoFrame: colorSpace property"
+short-title: colorSpace
slug: Web/API/VideoFrame/colorSpace
page-type: web-api-instance-property
browser-compat: api.VideoFrame.colorSpace
diff --git a/files/en-us/web/api/videoframe/copyto/index.md b/files/en-us/web/api/videoframe/copyto/index.md
index 0c25de332dd14c0..5a499aa5c932efa 100644
--- a/files/en-us/web/api/videoframe/copyto/index.md
+++ b/files/en-us/web/api/videoframe/copyto/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.copyTo()
+title: "VideoFrame: copyTo() method"
+short-title: copyTo()
slug: Web/API/VideoFrame/copyTo
page-type: web-api-instance-method
browser-compat: api.VideoFrame.copyTo
diff --git a/files/en-us/web/api/videoframe/displayheight/index.md b/files/en-us/web/api/videoframe/displayheight/index.md
index ee8decd362f6209..1475e7fec5841c2 100644
--- a/files/en-us/web/api/videoframe/displayheight/index.md
+++ b/files/en-us/web/api/videoframe/displayheight/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.displayHeight
+title: "VideoFrame: displayHeight property"
+short-title: displayHeight
slug: Web/API/VideoFrame/displayHeight
page-type: web-api-instance-property
browser-compat: api.VideoFrame.displayHeight
diff --git a/files/en-us/web/api/videoframe/displaywidth/index.md b/files/en-us/web/api/videoframe/displaywidth/index.md
index b6019cf4aa2d5af..fe89ceba10a4412 100644
--- a/files/en-us/web/api/videoframe/displaywidth/index.md
+++ b/files/en-us/web/api/videoframe/displaywidth/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.displayWidth
+title: "VideoFrame: displayWidth property"
+short-title: displayWidth
slug: Web/API/VideoFrame/displayWidth
page-type: web-api-instance-property
browser-compat: api.VideoFrame.displayWidth
diff --git a/files/en-us/web/api/videoframe/duration/index.md b/files/en-us/web/api/videoframe/duration/index.md
index 10feed7bf575e91..20ba81a74aaa816 100644
--- a/files/en-us/web/api/videoframe/duration/index.md
+++ b/files/en-us/web/api/videoframe/duration/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.duration
+title: "VideoFrame: duration property"
+short-title: duration
slug: Web/API/VideoFrame/duration
page-type: web-api-instance-property
browser-compat: api.VideoFrame.duration
diff --git a/files/en-us/web/api/videoframe/format/index.md b/files/en-us/web/api/videoframe/format/index.md
index 14a67f3eb0549b1..a2bec5908ac82f7 100644
--- a/files/en-us/web/api/videoframe/format/index.md
+++ b/files/en-us/web/api/videoframe/format/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.format
+title: "VideoFrame: format property"
+short-title: format
slug: Web/API/VideoFrame/format
page-type: web-api-instance-property
browser-compat: api.VideoFrame.format
diff --git a/files/en-us/web/api/videoframe/index.md b/files/en-us/web/api/videoframe/index.md
index 549ca401daf67bf..f19eb2c3eb8d8c5 100644
--- a/files/en-us/web/api/videoframe/index.md
+++ b/files/en-us/web/api/videoframe/index.md
@@ -69,7 +69,7 @@ Created frames may then turned into a media track, for example with the {{domxre
## Examples
-In the following example frames are returned from a {{domxref("MediaStreamTrackProcessor")}}, then encoded. See the full example and read more about it in the article [Video processing with WebCodecs](https://web.dev/webcodecs/).
+In the following example frames are returned from a {{domxref("MediaStreamTrackProcessor")}}, then encoded. See the full example and read more about it in the article [Video processing with WebCodecs](https://developer.chrome.com/docs/web-platform/best-practices/webcodecs).
```js
let frame_counter = 0;
@@ -106,5 +106,5 @@ while (true) {
## See also
-- [Video processing with WebCodecs](https://web.dev/webcodecs/)
+- [Video processing with WebCodecs](https://developer.chrome.com/docs/web-platform/best-practices/webcodecs)
- [WebCodecs examples](https://w3c.github.io/webcodecs/samples/)
diff --git a/files/en-us/web/api/videoframe/timestamp/index.md b/files/en-us/web/api/videoframe/timestamp/index.md
index c9fc847e45f4bc2..608e99b3867643d 100644
--- a/files/en-us/web/api/videoframe/timestamp/index.md
+++ b/files/en-us/web/api/videoframe/timestamp/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.timestamp
+title: "VideoFrame: timestamp property"
+short-title: timestamp
slug: Web/API/VideoFrame/timestamp
page-type: web-api-instance-property
browser-compat: api.VideoFrame.timestamp
diff --git a/files/en-us/web/api/videoframe/videoframe/index.md b/files/en-us/web/api/videoframe/videoframe/index.md
index 4d00d74a777f433..b6d1a0bcef91aeb 100644
--- a/files/en-us/web/api/videoframe/videoframe/index.md
+++ b/files/en-us/web/api/videoframe/videoframe/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame()
+title: "VideoFrame: VideoFrame() constructor"
+short-title: VideoFrame()
slug: Web/API/VideoFrame/VideoFrame
page-type: web-api-constructor
browser-compat: api.VideoFrame.VideoFrame
@@ -113,7 +114,7 @@ The second type of constructor (see above) creates a new {{domxref("VideoFrame")
## Examples
-The following examples are from the article [Video processing with WebCodecs](https://web.dev/webcodecs/). In this first example, a `VideoFrame` is created from a canvas.
+The following examples are from the article [Video processing with WebCodecs](https://developer.chrome.com/docs/web-platform/best-practices/webcodecs). In this first example, a `VideoFrame` is created from a canvas.
```js
const cnv = document.createElement("canvas");
diff --git a/files/en-us/web/api/videoframe/visiblerect/index.md b/files/en-us/web/api/videoframe/visiblerect/index.md
index ba551c24d3c073a..ec3fbbc0d0ceeda 100644
--- a/files/en-us/web/api/videoframe/visiblerect/index.md
+++ b/files/en-us/web/api/videoframe/visiblerect/index.md
@@ -1,5 +1,6 @@
---
-title: VideoFrame.visibleRect
+title: "VideoFrame: visibleRect property"
+short-title: visibleRect
slug: Web/API/VideoFrame/visibleRect
page-type: web-api-instance-property
browser-compat: api.VideoFrame.visibleRect
diff --git a/files/en-us/web/api/videoplaybackquality/corruptedvideoframes/index.md b/files/en-us/web/api/videoplaybackquality/corruptedvideoframes/index.md
index 716eff27d6a243f..82e71ee41afebd5 100644
--- a/files/en-us/web/api/videoplaybackquality/corruptedvideoframes/index.md
+++ b/files/en-us/web/api/videoplaybackquality/corruptedvideoframes/index.md
@@ -1,5 +1,6 @@
---
-title: VideoPlaybackQuality.corruptedVideoFrames
+title: "VideoPlaybackQuality: corruptedVideoFrames property"
+short-title: corruptedVideoFrames
slug: Web/API/VideoPlaybackQuality/corruptedVideoFrames
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/videoplaybackquality/creationtime/index.md b/files/en-us/web/api/videoplaybackquality/creationtime/index.md
index fe6d33b1223bc54..6de98de9d31b459 100644
--- a/files/en-us/web/api/videoplaybackquality/creationtime/index.md
+++ b/files/en-us/web/api/videoplaybackquality/creationtime/index.md
@@ -1,5 +1,6 @@
---
-title: VideoPlaybackQuality.creationTime
+title: "VideoPlaybackQuality: creationTime property"
+short-title: creationTime
slug: Web/API/VideoPlaybackQuality/creationTime
page-type: web-api-instance-property
browser-compat: api.VideoPlaybackQuality.creationTime
diff --git a/files/en-us/web/api/videoplaybackquality/droppedvideoframes/index.md b/files/en-us/web/api/videoplaybackquality/droppedvideoframes/index.md
index 0cf034b0c38dbdc..2452c2cd392f5ba 100644
--- a/files/en-us/web/api/videoplaybackquality/droppedvideoframes/index.md
+++ b/files/en-us/web/api/videoplaybackquality/droppedvideoframes/index.md
@@ -1,5 +1,6 @@
---
-title: VideoPlaybackQuality.droppedVideoFrames
+title: "VideoPlaybackQuality: droppedVideoFrames property"
+short-title: droppedVideoFrames
slug: Web/API/VideoPlaybackQuality/droppedVideoFrames
page-type: web-api-instance-property
browser-compat: api.VideoPlaybackQuality.droppedVideoFrames
diff --git a/files/en-us/web/api/videoplaybackquality/totalframedelay/index.md b/files/en-us/web/api/videoplaybackquality/totalframedelay/index.md
index 4f128c2a15391dd..14a5e6ba3ca8769 100644
--- a/files/en-us/web/api/videoplaybackquality/totalframedelay/index.md
+++ b/files/en-us/web/api/videoplaybackquality/totalframedelay/index.md
@@ -1,5 +1,6 @@
---
-title: VideoPlaybackQuality.totalFrameDelay
+title: "VideoPlaybackQuality: totalFrameDelay property"
+short-title: totalFrameDelay
slug: Web/API/VideoPlaybackQuality/totalFrameDelay
page-type: web-api-instance-property
status:
diff --git a/files/en-us/web/api/videoplaybackquality/totalvideoframes/index.md b/files/en-us/web/api/videoplaybackquality/totalvideoframes/index.md
index 34e265243c3a07c..90e7c8b81dfcf71 100644
--- a/files/en-us/web/api/videoplaybackquality/totalvideoframes/index.md
+++ b/files/en-us/web/api/videoplaybackquality/totalvideoframes/index.md
@@ -1,5 +1,6 @@
---
-title: VideoPlaybackQuality.totalVideoFrames
+title: "VideoPlaybackQuality: totalVideoFrames property"
+short-title: totalVideoFrames
slug: Web/API/VideoPlaybackQuality/totalVideoFrames
page-type: web-api-instance-property
browser-compat: api.VideoPlaybackQuality.totalVideoFrames
diff --git a/files/en-us/web/api/videotrack/id/index.md b/files/en-us/web/api/videotrack/id/index.md
index 6b123805712d5ac..77a670c94fbdfc7 100644
--- a/files/en-us/web/api/videotrack/id/index.md
+++ b/files/en-us/web/api/videotrack/id/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrack.id
+title: "VideoTrack: id property"
+short-title: id
slug: Web/API/VideoTrack/id
page-type: web-api-instance-property
browser-compat: api.VideoTrack.id
diff --git a/files/en-us/web/api/videotrack/kind/index.md b/files/en-us/web/api/videotrack/kind/index.md
index e3327722bb46c0a..57a894364ef1344 100644
--- a/files/en-us/web/api/videotrack/kind/index.md
+++ b/files/en-us/web/api/videotrack/kind/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrack.kind
+title: "VideoTrack: kind property"
+short-title: kind
slug: Web/API/VideoTrack/kind
page-type: web-api-instance-property
browser-compat: api.VideoTrack.kind
diff --git a/files/en-us/web/api/videotrack/label/index.md b/files/en-us/web/api/videotrack/label/index.md
index 76a940194bf9af3..dafcf7be6bb5ec4 100644
--- a/files/en-us/web/api/videotrack/label/index.md
+++ b/files/en-us/web/api/videotrack/label/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrack.label
+title: "VideoTrack: label property"
+short-title: label
slug: Web/API/VideoTrack/label
page-type: web-api-instance-property
browser-compat: api.VideoTrack.label
diff --git a/files/en-us/web/api/videotrack/language/index.md b/files/en-us/web/api/videotrack/language/index.md
index 7432a5d7c3ce247..49ece18ca1a3e06 100644
--- a/files/en-us/web/api/videotrack/language/index.md
+++ b/files/en-us/web/api/videotrack/language/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrack.language
+title: "VideoTrack: language property"
+short-title: language
slug: Web/API/VideoTrack/language
page-type: web-api-instance-property
browser-compat: api.VideoTrack.language
diff --git a/files/en-us/web/api/videotrack/selected/index.md b/files/en-us/web/api/videotrack/selected/index.md
index 61932967a1335db..36cdd24366243f0 100644
--- a/files/en-us/web/api/videotrack/selected/index.md
+++ b/files/en-us/web/api/videotrack/selected/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrack.selected
+title: "VideoTrack: selected property"
+short-title: selected
slug: Web/API/VideoTrack/selected
page-type: web-api-instance-property
browser-compat: api.VideoTrack.selected
diff --git a/files/en-us/web/api/videotrack/sourcebuffer/index.md b/files/en-us/web/api/videotrack/sourcebuffer/index.md
index 3b597e2bb563198..dbfb202f773d0d7 100644
--- a/files/en-us/web/api/videotrack/sourcebuffer/index.md
+++ b/files/en-us/web/api/videotrack/sourcebuffer/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrack.sourceBuffer
+title: "VideoTrack: sourceBuffer property"
+short-title: sourceBuffer
slug: Web/API/VideoTrack/sourceBuffer
page-type: web-api-instance-property
browser-compat: api.VideoTrack.sourceBuffer
diff --git a/files/en-us/web/api/videotracklist/addtrack_event/index.md b/files/en-us/web/api/videotracklist/addtrack_event/index.md
index 30eea1f4a0c901f..3a08ad8598afbca 100644
--- a/files/en-us/web/api/videotracklist/addtrack_event/index.md
+++ b/files/en-us/web/api/videotracklist/addtrack_event/index.md
@@ -1,5 +1,6 @@
---
title: "VideoTrackList: addtrack event"
+short-title: addtrack
slug: Web/API/VideoTrackList/addtrack_event
page-type: web-api-event
browser-compat: api.VideoTrackList.addtrack_event
diff --git a/files/en-us/web/api/videotracklist/change_event/index.md b/files/en-us/web/api/videotracklist/change_event/index.md
index 5d9cd512ad931e2..a629f92d974e706 100644
--- a/files/en-us/web/api/videotracklist/change_event/index.md
+++ b/files/en-us/web/api/videotracklist/change_event/index.md
@@ -1,5 +1,6 @@
---
title: "VideoTrackList: change event"
+short-title: change
slug: Web/API/VideoTrackList/change_event
page-type: web-api-event
browser-compat: api.VideoTrackList.change_event
diff --git a/files/en-us/web/api/videotracklist/gettrackbyid/index.md b/files/en-us/web/api/videotracklist/gettrackbyid/index.md
index 80249eb9950ab14..00f3cd390d57034 100644
--- a/files/en-us/web/api/videotracklist/gettrackbyid/index.md
+++ b/files/en-us/web/api/videotracklist/gettrackbyid/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrackList.getTrackById()
+title: "VideoTrackList: getTrackById() method"
+short-title: getTrackById()
slug: Web/API/VideoTrackList/getTrackById
page-type: web-api-instance-method
browser-compat: api.VideoTrackList.getTrackById
diff --git a/files/en-us/web/api/videotracklist/length/index.md b/files/en-us/web/api/videotracklist/length/index.md
index 72477f8f7b3ed53..c5b8052682f78fc 100644
--- a/files/en-us/web/api/videotracklist/length/index.md
+++ b/files/en-us/web/api/videotracklist/length/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrackList.length
+title: "VideoTrackList: length property"
+short-title: length
slug: Web/API/VideoTrackList/length
page-type: web-api-instance-property
browser-compat: api.VideoTrackList.length
diff --git a/files/en-us/web/api/videotracklist/removetrack_event/index.md b/files/en-us/web/api/videotracklist/removetrack_event/index.md
index 560fdfc55bf2709..e7c7d2e172ed2d8 100644
--- a/files/en-us/web/api/videotracklist/removetrack_event/index.md
+++ b/files/en-us/web/api/videotracklist/removetrack_event/index.md
@@ -1,5 +1,6 @@
---
title: "VideoTrackList: removetrack event"
+short-title: removetrack
slug: Web/API/VideoTrackList/removetrack_event
page-type: web-api-event
browser-compat: api.VideoTrackList.removetrack_event
diff --git a/files/en-us/web/api/videotracklist/selectedindex/index.md b/files/en-us/web/api/videotracklist/selectedindex/index.md
index a06c2879e694bef..05b3b697d6f45f8 100644
--- a/files/en-us/web/api/videotracklist/selectedindex/index.md
+++ b/files/en-us/web/api/videotracklist/selectedindex/index.md
@@ -1,5 +1,6 @@
---
-title: VideoTrackList.selectedIndex
+title: "VideoTrackList: selectedIndex property"
+short-title: selectedIndex
slug: Web/API/VideoTrackList/selectedIndex
page-type: web-api-instance-property
browser-compat: api.VideoTrackList.selectedIndex
diff --git a/files/en-us/web/api/view_transitions_api/index.md b/files/en-us/web/api/view_transitions_api/index.md
index 0afe75c94b0a4be..a54185eac026287 100644
--- a/files/en-us/web/api/view_transitions_api/index.md
+++ b/files/en-us/web/api/view_transitions_api/index.md
@@ -2,27 +2,27 @@
title: View Transitions API
slug: Web/API/View_Transitions_API
page-type: web-api-overview
-status: experimental
-browser-compat:
- - api.Document.startViewTransition
+status:
+ - experimental
+browser-compat: api.Document.startViewTransition
---
{{SeeCompatTable}}{{DefaultAPISidebar("View Transitions API")}}
-The **View Transitions API** provides a mechanism for easily creating animated transitions between different DOM states, while also updating the DOM contents in a single step.
+The **View Transitions API** provides a mechanism for easily creating animated transitions between different DOM states while also updating the DOM contents in a single step.
## Concepts and usage
View transitions are a popular design choice for reducing users' cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application.
-However, creating view transitions on the web has historically been difficult. Transitions between states in single-page apps (SPAs) tends to involve writing significant CSS and JavaScript to:
+However, creating view transitions on the web has historically been difficult. Transitions between states in single-page apps (SPAs) tend to involve writing significant CSS and JavaScript to:
- Handle the loading and positioning of the old and new content.
- Animate the old and new states to create the transition.
- Stop accidental user interactions with the old content from causing problems.
- Remove the old content once the transition is complete.
-There is also the major issue of accessibility issues caused by having the new and old content both present in the DOM at once, such as loss of reading position, focus confusion, and strange live region announcement behavior. And cross-document view transitions (i.e. across different pages in regular web sites) are impossible.
+Accessibility issues like loss of reading position, focus confusion, and strange live region announcement behavior can also result from having the new and old content both present in the DOM at once. In addition, cross-document view transitions (i.e. across different pages in regular, non-SPA websites) are impossible.
The View Transitions API provides a much easier way of handling the required DOM changes and transition animations.
@@ -30,7 +30,7 @@ The View Transitions API provides a much easier way of handling the required DOM
### Creating a basic view transition
-An SPA will include functionality to fetch new content and update the DOM in response to an event of some kind, such as a navigation link being clicked or an update being pushed from the server. In our [Basic View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/) we've simplified this to a `displayNewImage()` function that shows a new full-size image based on the thumbnail that was clicked. We've encapsulated this inside an `updateView()` function that handles both browsers that do and don't support the View Transitions API:
+As an example, an SPA may include functionality to fetch new content and update the DOM in response to an event of some kind, such as a navigation link being clicked or an update being pushed from the server. In our [Basic View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/) we've simplified this to a `displayNewImage()` function that shows a new full-size image based on the thumbnail that was clicked. We've encapsulated this inside an `updateView()` function that only calls the View Transition API if the browser supports it:
```js
function updateView(event) {
@@ -54,7 +54,7 @@ function updateView(event) {
}
```
-And that's it. This code is enough to handle the transition between displayed images. Supporting browsers will show the change from old to new images and captions as a smooth cross-fade (the default view transition), and it will still work in non-supporting browsers but without the nice animation.
+This code is enough to handle the transition between displayed images. Supporting browsers will show the change from old to new images and captions as a smooth cross-fade (the default view transition). It will still work in non-supporting browsers but without the nice animation.
It is also worth mentioning that `startViewTransition()` returns a {{domxref("ViewTransition")}} instance, which includes several promises, allowing you to run code in response to different parts of the view transition process being reached.
@@ -70,7 +70,7 @@ Let's walk through how this works:
3. The API captures the new state of the page as a live representation.
4. The API constructs a pseudo-element tree with the following structure:
- ```
+ ```plain
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
@@ -88,7 +88,7 @@ Let's walk through how this works:
### Different transitions for different elements
-At the moment, all of the different elements that change when then DOM updates are transitioned using the same animation. If you want different elements to animate differently from the default "root" animation, you can separate them out using the {{cssxref("view-transition-name")}} property. For example:
+At the moment, all of the different elements that change when the DOM updates are transitioned using the same animation. If you want different elements to animate differently from the default "root" animation, you can separate them out using the {{cssxref("view-transition-name")}} property. For example:
```css
figcaption {
@@ -100,7 +100,7 @@ We've given the {{htmlelement("figcaption")}} element a `view-transition-name` o
With this CSS applied, the pseudo-element tree will now look like this:
-```
+```plain
::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
@@ -120,7 +120,11 @@ The value of `view-transition-name` can be anything you want except for `none`
### Customizing your animations
-The View Transitions pseudo-elements have default [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) applied (which are detailed in their [reference pages](#css_additions)). You can modify the default cross-fade in any way you want using regular CSS.
+The View Transitions pseudo-elements have default [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) applied (which are detailed in their [reference pages](#css_additions)).
+
+Notably, transitions for `height`, `width`, `position`, and `transform` do not use the smooth cross-fade animation. Instead, height and width transitions apply a smooth scaling animation. Meanwhile, position and transform transitions apply smooth movement animations to the element.
+
+You can modify the default animation in any way you want using regular CSS.
For example, to change the speed of it:
@@ -169,7 +173,7 @@ Let's look at something more interesting — a custom animation for the `` view transition ended up looking like this:
@@ -184,13 +188,13 @@ figcaption {
}
```
-This works because by default, `::view-transition-group` transitions width and height between the old and new views. We just needed to set a fixed `height` on both states to make it work.
+This works because, by default, `::view-transition-group` transitions width and height between the old and new views. We just needed to set a fixed `height` on both states to make it work.
> **Note:** [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples.
### Controlling animations with JavaScript
-The {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method returns a {{domxref("ViewTransition")}} object instance, which contains several promise members allowing you to run JavaScript in response to different states of the transition being reached. For example, {{domxref("ViewTransition.ready")}} fulfills once the pseudo-element tree is created and the animation is about to start, whereas {{domxref("ViewTransition.finished")}} fulfills once the the animation is finished, and the new page view is visible and interactive to the user.
+The {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method returns a {{domxref("ViewTransition")}} object instance, which contains several promise members allowing you to run JavaScript in response to different states of the transition being reached. For example, {{domxref("ViewTransition.ready")}} fulfills once the pseudo-element tree is created and the animation is about to start, whereas {{domxref("ViewTransition.finished")}} fulfills once the animation is finished, and the new page view is visible and interactive to the user.
For example, the following JavaScript could be used to create a circular reveal view transition emanating from the position of the user's cursor on click, with animation provided by the {{domxref("Web Animations API", "Web Animations API", "", "nocode")}}.
@@ -212,7 +216,7 @@ function spaNavigate(data) {
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
- Math.max(y, innerHeight - y)
+ Math.max(y, innerHeight - y),
);
// Create a transition:
@@ -235,7 +239,7 @@ function spaNavigate(data) {
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
- }
+ },
);
});
}
@@ -302,3 +306,4 @@ This animation also requires the following CSS, to turn off the default CSS anim
## See also
- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)
+- [View Transitions API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/)
diff --git a/files/en-us/web/api/viewtimeline/endoffset/index.md b/files/en-us/web/api/viewtimeline/endoffset/index.md
new file mode 100644
index 000000000000000..104c7afed32fbd8
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/endoffset/index.md
@@ -0,0 +1,36 @@
+---
+title: "ViewTimeline: endOffset property"
+short-title: endOffset
+slug: Web/API/ViewTimeline/endOffset
+page-type: web-api-instance-property
+status:
+ - experimental
+browser-compat: api.ViewTimeline.endOffset
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`endOffset`** read-only property of the {{domxref("ViewTimeline")}} interface returns a {{domxref("CSSNumericValue")}} representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+
+## Value
+
+A {{domxref("CSSNumericValue")}}.
+
+## Examples
+
+See the main {{domxref("ScrollTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/index.md b/files/en-us/web/api/viewtimeline/index.md
new file mode 100644
index 000000000000000..16be717f493f3cf
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/index.md
@@ -0,0 +1,175 @@
+---
+title: ViewTimeline
+slug: Web/API/ViewTimeline
+page-type: web-api-interface
+status:
+ - experimental
+browser-compat: api.ViewTimeline
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`ViewTimeline`** interface of the {{domxref("Web Animations API", "Web Animations API", "", "nocode")}} represents a view progress timeline (see [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations) for more details).
+
+Pass a `ViewTimeline` instance to the {{domxref("Animation.Animation", "Animation()")}} constructor or the {{domxref("Element.animate()", "animate()")}} method to specify it as the timeline that will control the progress of the animation.
+
+{{InheritanceDiagram}}
+
+## Constructor
+
+- {{domxref("ViewTimeline.ViewTimeline", "ViewTimeline()")}} {{Experimental_Inline}}
+ - : Creates a new `ViewTimeline` object instance.
+
+## Instance properties
+
+_This interface also inherits the properties of its parent, {{domxref("ScrollTimeline")}}._
+
+- {{domxref("ViewTimeline.subject", "subject")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : Returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline and therefore the animation.
+- {{domxref("ViewTimeline.startOffset", "startOffset")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : Returns a {{domxref("CSSNumericValue")}} representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+- {{domxref("ViewTimeline.endOffset", "endOffset")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : Returns a {{domxref("CSSNumericValue")}} representing the ending (100% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+
+## Instance methods
+
+_This interface inherits the methods of its parent, {{domxref("ScrollTimeline")}}._
+
+## Examples
+
+### Displaying the subject and offsets of a view progress timeline
+
+In this example, we animate an element with a `class` of `subject` along a view progress timeline — it animates when moved upwards through the document as it scrolls. We also output the `subject`, `startOffset`, and `endOffset` values to an output element in the top-right corner.
+
+#### HTML
+
+The HTML for the example is shown below.
+
+```html
+
+
Content
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
+ quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
+ interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
+ vivamus at augue.
+
+
+
+ Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
+ dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
+ duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
+ Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
+ arcu vitae elementum curabitur vitae nunc sed velit.
+
+
+
+
+
+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
+ cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
+ dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
+ tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
+ vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
+ quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
+ imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
+ scelerisque. Netus et malesuada fames ac.
+
+
+
+
+```
+
+#### CSS
+
+The CSS for the example looks like this:
+
+```css
+.subject {
+ width: 300px;
+ height: 200px;
+ margin: 0 auto;
+ background-color: deeppink;
+}
+
+.content {
+ width: 75%;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.output {
+ position: fixed;
+ top: 5px;
+ right: 5px;
+}
+
+p,
+h1,
+div {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+ font-size: 3rem;
+}
+
+p {
+ font-size: 1.5rem;
+ line-height: 1.5;
+}
+```
+
+#### JavaScript
+
+In the JavaScript, we grab references to the `subject` and `output` ``s, then create a new {{domxref("ViewTimeline")}}, associating it with the `subject` element to specify that the timeline progress is based on this element's visibility through its scrolling ancestor, setting a `block` axis, and setting `inset` values to adjust the position of the box in which the subject is deemed to be visible.
+
+We then animate the `subject` element with the Web Animations API. Last of all, we display the `subject`, `startOffset`, and `endOffset` values in the `output` element.
+
+```js
+const subject = document.querySelector(".subject");
+const output = document.querySelector(".output");
+
+const timeline = new ViewTimeline({
+ subject,
+ axis: "block",
+ inset: [CSS.px("200"), CSS.px("300")],
+});
+
+subject.animate(
+ {
+ opacity: [0, 1],
+ transform: ["scaleX(0)", "scaleX(1)"],
+ },
+ {
+ fill: "both",
+ timeline,
+ },
+);
+
+output.textContent += `Subject element: ${timeline.subject.nodeName}, `;
+output.textContent += `start offset: ${timeline.startOffset}, `;
+output.textContent += `end offset: ${timeline.endOffset}.`;
+```
+
+#### Result
+
+Scroll to see the subject element being animated.
+
+{{EmbedLiveSample("Tracking the progress of a view progress timeline", "100%", "480px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/startoffset/index.md b/files/en-us/web/api/viewtimeline/startoffset/index.md
new file mode 100644
index 000000000000000..78236d902e0a92c
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/startoffset/index.md
@@ -0,0 +1,36 @@
+---
+title: "ViewTimeline: startOffset property"
+short-title: startOffset
+slug: Web/API/ViewTimeline/startOffset
+page-type: web-api-instance-property
+status:
+ - experimental
+browser-compat: api.ViewTimeline.startOffset
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`startOffset`** read-only property of the {{domxref("ViewTimeline")}} interface returns a {{domxref("CSSNumericValue")}} representing the starting (0% progress) scroll position of the timeline as an offset from the start of the overflowing section of content in the scroller.
+
+## Value
+
+A {{domxref("CSSNumericValue")}}.
+
+## Examples
+
+See the main {{domxref("ScrollTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/subject/index.md b/files/en-us/web/api/viewtimeline/subject/index.md
new file mode 100644
index 000000000000000..783626d691c23af
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/subject/index.md
@@ -0,0 +1,36 @@
+---
+title: "ViewTimeline: subject property"
+short-title: subject
+slug: Web/API/ViewTimeline/subject
+page-type: web-api-instance-property
+status:
+ - experimental
+browser-compat: api.ViewTimeline.subject
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+The **`subject`** read-only property of the {{domxref("ViewTimeline")}} interface returns a reference to the subject element whose visibility within its nearest ancestor scrollable element (scroller) is driving the progress of the timeline.
+
+## Value
+
+An {{domxref("Element")}}.
+
+## Examples
+
+See the main {{domxref("ViewTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtimeline/viewtimeline/index.md b/files/en-us/web/api/viewtimeline/viewtimeline/index.md
new file mode 100644
index 000000000000000..292f1455d91f0ad
--- /dev/null
+++ b/files/en-us/web/api/viewtimeline/viewtimeline/index.md
@@ -0,0 +1,73 @@
+---
+title: "ViewTimeline: ViewTimeline() constructor"
+short-title: ViewTimeline()
+slug: Web/API/ViewTimeline/ViewTimeline
+page-type: web-api-constructor
+status:
+ - experimental
+browser-compat: api.ViewTimeline.ViewTimeline
+---
+
+{{APIRef("History API")}}{{SeeCompatTable}}
+
+The **`ViewTimeline()`** constructor creates a new {{domxref("ViewTimeline")}} object instance.
+
+## Syntax
+
+```js-nolint
+new ViewTimeline(options)
+```
+
+### Parameters
+
+- `options`
+
+ - : An object that can contain the following properties:
+
+ - `subject`
+ - : A reference to an {{domxref("Element")}} representing the subject element whose visibility within its nearest ancestor scrollable element (scroller) will drive the progress of the timeline.
+ - `axis` {{optional_inline}}
+
+ - : An enumerated value representing the scroll axis that will drive the progress of the timeline. Possible values are:
+
+ - `"block"`: The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `"y"`, while for vertical writing modes, it is the same as `"x"`.
+ - `"inline"`: The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `"x"`, while for vertical writing modes, this is the same as `"y"`.
+ - `"y"`: The scrollbar on the vertical axis of the scroll container.
+ - `"x"`: The scrollbar on the horizontal axis of the scroll container.
+
+ If omitted, `axis` defaults to `"block"`.
+
+ - `inset` {{optional_inline}}
+
+ - : A value or array of values representing an adjustment to the position of the scrollport (see {{glossary("Scroll container")}} for more details) in which the subject is deemed to be visible. Possible values are:
+
+ - `"auto"`: The default box position is used.
+ - A string: If a string is specified, it can consist of one or two values equal to `auto` or a CSS {{cssxref("length-percentage")}} value. To put it another way, the string should be a valid {{cssxref("view-timeline-inset")}} value.
+ - An array of one or two values, which can be `"auto"` or a suitable {{domxref("CSSNumericValue")}} to represent a length or percentage offset (for example `CSS.px()` or `CSS.percent()`. If an array is provided, the first value represents the start inset (which affects the {{domxref("ViewTimeline.endOffset")}} value) and the second value represents the end inset (which affects the {{domxref("ViewTimeline.startOffset")}} value).
+
+ If the array has only one value, it is duplicated.
+
+ If omitted, `inset` defaults to `auto`.
+
+### Return value
+
+A new {{domxref("ViewTimeline")}} object instance.
+
+## Examples
+
+See the main {{domxref("ViewTimeline")}} page for an example.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ViewTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ScrollTimeline")}}
diff --git a/files/en-us/web/api/viewtransition/finished/index.md b/files/en-us/web/api/viewtransition/finished/index.md
index 834b44ca476f799..d936d3d476a0679 100644
--- a/files/en-us/web/api/viewtransition/finished/index.md
+++ b/files/en-us/web/api/viewtransition/finished/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.finished
+title: "ViewTransition: finished property"
+short-title: finished
slug: Web/API/ViewTransition/finished
page-type: web-api-instance-property
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.finished
---
@@ -28,17 +30,17 @@ Sometimes certain navigations will require specifically tailored transitions, fo
```js
async function handleTransition() {
if (isBackNavigation) {
- document.documentElement.classList.add('back-transition');
+ document.documentElement.classList.add("back-transition");
}
const transition = document.startViewTransition(() =>
- updateTheDOMSomehow(data)
+ updateTheDOMSomehow(data),
);
try {
await transition.finished;
} finally {
- document.documentElement.classList.remove('back-transition');
+ document.documentElement.classList.remove("back-transition");
}
}
```
diff --git a/files/en-us/web/api/viewtransition/index.md b/files/en-us/web/api/viewtransition/index.md
index 3a8d02f237c7089..36b23d570e0a85f 100644
--- a/files/en-us/web/api/viewtransition/index.md
+++ b/files/en-us/web/api/viewtransition/index.md
@@ -2,7 +2,8 @@
title: ViewTransition
slug: Web/API/ViewTransition
page-type: web-api-interface
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition
---
@@ -50,7 +51,7 @@ function spaNavigate(data) {
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
- Math.max(y, innerHeight - y)
+ Math.max(y, innerHeight - y),
);
// Create a transition:
@@ -73,7 +74,7 @@ function spaNavigate(data) {
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
- }
+ },
);
});
}
diff --git a/files/en-us/web/api/viewtransition/ready/index.md b/files/en-us/web/api/viewtransition/ready/index.md
index a20ad598856c9a1..622c2abfd86be0c 100644
--- a/files/en-us/web/api/viewtransition/ready/index.md
+++ b/files/en-us/web/api/viewtransition/ready/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.ready
+title: "ViewTransition: ready property"
+short-title: ready
slug: Web/API/ViewTransition/ready
page-type: web-api-instance-property
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.ready
---
@@ -39,7 +41,7 @@ function spaNavigate(data) {
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
- Math.max(y, innerHeight - y)
+ Math.max(y, innerHeight - y),
);
// Create a transition:
@@ -62,7 +64,7 @@ function spaNavigate(data) {
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
- }
+ },
);
});
}
diff --git a/files/en-us/web/api/viewtransition/skiptransition/index.md b/files/en-us/web/api/viewtransition/skiptransition/index.md
index 2062297be85ebf0..2e2c7f8498ef99e 100644
--- a/files/en-us/web/api/viewtransition/skiptransition/index.md
+++ b/files/en-us/web/api/viewtransition/skiptransition/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.skipTransition()
+title: "ViewTransition: skipTransition() method"
+short-title: skipTransition()
slug: Web/API/ViewTransition/skipTransition
page-type: web-api-instance-method
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.skipTransition
---
diff --git a/files/en-us/web/api/viewtransition/updatecallbackdone/index.md b/files/en-us/web/api/viewtransition/updatecallbackdone/index.md
index 6280c5947c5199e..da85c39ae64357d 100644
--- a/files/en-us/web/api/viewtransition/updatecallbackdone/index.md
+++ b/files/en-us/web/api/viewtransition/updatecallbackdone/index.md
@@ -1,8 +1,10 @@
---
-title: ViewTransition.updateCallbackDone
+title: "ViewTransition: updateCallbackDone property"
+short-title: updateCallbackDone
slug: Web/API/ViewTransition/updateCallbackDone
page-type: web-api-instance-property
-status: experimental
+status:
+ - experimental
browser-compat: api.ViewTransition.updateCallbackDone
---
@@ -23,10 +25,9 @@ A promise.
// start new view transition
const transition = document.startViewTransition(() => displayNewImage());
-transition.updateCallbackDone
- .then(() => {
- // Respond to the DOM being updated successfully
- });
+transition.updateCallbackDone.then(() => {
+ // Respond to the DOM being updated successfully
+});
```
See [Transitions as an enhancement](https://developer.chrome.com/docs/web-platform/view-transitions/#transitions-as-an-enhancement) for a useful example.
diff --git a/files/en-us/web/api/virtualkeyboard/boundingrect/index.md b/files/en-us/web/api/virtualkeyboard/boundingrect/index.md
index 46814f03dd2c323..575ce9e2c00e2c4 100644
--- a/files/en-us/web/api/virtualkeyboard/boundingrect/index.md
+++ b/files/en-us/web/api/virtualkeyboard/boundingrect/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.boundingRect
+title: "VirtualKeyboard: boundingRect property"
+short-title: boundingRect
slug: Web/API/VirtualKeyboard/boundingRect
page-type: web-api-instance-property
status:
@@ -7,7 +8,7 @@ status:
browser-compat: api.VirtualKeyboard.boundingRect
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`boundingRect`** property of the {{domxref("VirtualKeyboard")}} interface contains a {{domxref("DOMRect")}} indicating the position and size of the on-screen virtual keyboard that overlays the web page.
diff --git a/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md b/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md
index adb159623cf14b8..49521dd3e19e9cf 100644
--- a/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md
+++ b/files/en-us/web/api/virtualkeyboard/geometrychange_event/index.md
@@ -1,5 +1,6 @@
---
title: "VirtualKeyboard: geometrychange event"
+short-title: geometrychange
slug: Web/API/VirtualKeyboard/geometrychange_event
page-type: web-api-event
status:
@@ -7,7 +8,7 @@ status:
browser-compat: api.VirtualKeyboard.geometrychange_event
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`geometrychange`** event of the {{domxref("VirtualKeyboard")}}
interface fires when the on-screen virtual keyboard is toggled between shown and hidden states.
@@ -34,7 +35,7 @@ The following code snippet uses the `geometrychange` event to detect when the vi
```js
if ("virtualKeyboard" in navigator) {
- navigator.overlaysContent = true;
+ navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
const { x, y, width, height } = event.target.boundingRect;
diff --git a/files/en-us/web/api/virtualkeyboard/hide/index.md b/files/en-us/web/api/virtualkeyboard/hide/index.md
index 4a866bdaa555a92..99f5619975135fc 100644
--- a/files/en-us/web/api/virtualkeyboard/hide/index.md
+++ b/files/en-us/web/api/virtualkeyboard/hide/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.hide()
+title: "VirtualKeyboard: hide() method"
+short-title: hide()
slug: Web/API/VirtualKeyboard/hide
page-type: web-api-instance-method
status:
@@ -7,11 +8,11 @@ status:
browser-compat: api.VirtualKeyboard.hide
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`hide()`** method of the {{domxref("VirtualKeyboard")}} interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the {{domxref("VirtualKeyboard_API", "VirtualKeyboard API", "", "nocode")}}.
-This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable).
+This method only works if the currently-focused element's [`virtualKeyboardPolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute is set to `manual` and [`inputmode`](/en-US/docs/Web/HTML/Global_attributes/inputmode) isn't set to `none`.
The `hide()` method always returns `undefined` and triggers a {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} event.
diff --git a/files/en-us/web/api/virtualkeyboard/index.md b/files/en-us/web/api/virtualkeyboard/index.md
index 06a1dcff5cb93b8..75e7ee908f4b430 100644
--- a/files/en-us/web/api/virtualkeyboard/index.md
+++ b/files/en-us/web/api/virtualkeyboard/index.md
@@ -7,7 +7,7 @@ status:
browser-compat: api.VirtualKeyboard
---
-{{SeeCompatTable}}{{APIRef("VirtualKeyboard API")}}
+{{SeeCompatTable}}{{APIRef("VirtualKeyboard API")}}{{securecontext_header}}
The **`VirtualKeyboard`** interface of the [VirtualKeyboard API](/en-US/docs/Web/API/VirtualKeyboard_API) is useful on devices that have on-screen virtual keyboards, such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
@@ -19,34 +19,34 @@ You access the `VirtualKeyboard` interface by using {{domxref("navigator.virtual
## Instance properties
-_The `VirtualKeyboard` interface doesn't inherit any properties._
+_The `VirtualKeyboard` interface inherits properties from its parent, {{domxref("EventTarget")}}._
- {{DOMxRef("VirtualKeyboard.boundingRect")}} {{ReadOnlyInline}} {{Experimental_Inline}}
- : A {{domxref("DOMRect")}} that describes the geometry of the virtual keyboard.
- {{DOMxRef("VirtualKeyboard.overlaysContent")}} {{Experimental_Inline}}
- : A {{jsxref('Boolean')}} that defines whether the browser should stop handling the on-screen virtual keyboard.
-### Events
-
-- {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} {{Experimental_Inline}}
- - : Fires when the geometry of the on-screen virtual keyboard changes, which happens when the virtual keyboard appears or disappears.
-
## Instance methods
-_The `VirtualKeyboard` interface doesn't inherit any methods_.
+_The `VirtualKeyboard` interface inherits methods from its parent, {{domxref("EventTarget")}}._
- {{domxref('VirtualKeyboard.show()')}} {{experimental_inline}}
- : Show the virtual keyboard.
- {{domxref('VirtualKeyboard.hide()')}} {{experimental_inline}}
- : Hide the virtual keyboard.
+## Events
+
+- {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} {{Experimental_Inline}}
+ - : Fires when the geometry of the on-screen virtual keyboard changes, which happens when the virtual keyboard appears or disappears.
+
## Example
The following example demonstrates how to opt out of the automatic virtual keyboard behavior, and detect the geometry of the virtual keyboard in the web page:
```js
if ("virtualKeyboard" in navigator) {
- navigator.overlaysContent = true;
+ navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
const { x, y, width, height } = event.target.boundingRect;
diff --git a/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md b/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md
index eec3f9f567a5971..f1570ce831cf4a8 100644
--- a/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md
+++ b/files/en-us/web/api/virtualkeyboard/overlayscontent/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.overlaysContent
+title: "VirtualKeyboard: overlaysContent property"
+short-title: overlaysContent
slug: Web/API/VirtualKeyboard/overlaysContent
page-type: web-api-instance-property
status:
@@ -7,7 +8,7 @@ status:
browser-compat: api.VirtualKeyboard.overlaysContent
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`overlaysContent`** property of the VirtualKeyboard interface can be used to opt out of the automatic way in which browsers handle on-screen virtual keyboards by reducing the size of the viewport to make space for them.
diff --git a/files/en-us/web/api/virtualkeyboard/show/index.md b/files/en-us/web/api/virtualkeyboard/show/index.md
index ebcec306234ce84..edf87254466d861 100644
--- a/files/en-us/web/api/virtualkeyboard/show/index.md
+++ b/files/en-us/web/api/virtualkeyboard/show/index.md
@@ -1,5 +1,6 @@
---
-title: VirtualKeyboard.show()
+title: "VirtualKeyboard: show() method"
+short-title: show()
slug: Web/API/VirtualKeyboard/show
page-type: web-api-instance-method
status:
@@ -7,11 +8,11 @@ status:
browser-compat: api.VirtualKeyboard.show
---
-{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}
+{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`show()`** method of the {{domxref("VirtualKeyboard")}} interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the `virtualkeyboardpolicy` attribute on `contenteditable` elements as explained in [Control the virtual keyboard on `contenteditable` elements](/en-US/docs/Web/API/VirtualKeyboard_API#control_the_virtual_keyboard_on_contenteditable_elements).
-This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable).
+This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable), and the currently-focused element's [`virtualKeyboardPolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute is set to `manual` and [`inputmode`](/en-US/docs/Web/HTML/Global_attributes/inputmode) isn't set to `none`.
The `show()` method always returns `undefined` and triggers a {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} event.
diff --git a/files/en-us/web/api/virtualkeyboard_api/index.md b/files/en-us/web/api/virtualkeyboard_api/index.md
index 741af611eea16dd..f91f38746cf775a 100644
--- a/files/en-us/web/api/virtualkeyboard_api/index.md
+++ b/files/en-us/web/api/virtualkeyboard_api/index.md
@@ -4,11 +4,10 @@ slug: Web/API/VirtualKeyboard_API
page-type: web-api-overview
status:
- experimental
-browser-compat:
- - api.VirtualKeyboard
+browser-compat: api.VirtualKeyboard
---
-{{SeeCompatTable}}{{DefaultAPISidebar("VirtualKeyboard API")}}
+{{SeeCompatTable}}{{DefaultAPISidebar("VirtualKeyboard API")}}{{securecontext_header}}
The VirtualKeyboard API provides developers control over the layout of their applications when the on-screen virtual keyboard appears and disappears on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.
@@ -32,7 +31,7 @@ The VirtualKeyboard API consists of three parts:
- The {{domxref("VirtualKeyboard")}} interface, accessed through {{domxref('navigator.virtualKeyboard')}}, is used to opt out of the automatic virtual keyboard behavior, show or hide the virtual keyboard programmatically, as well as get the current position and size of the virtual keyboard.
- The `keyboard-inset-*` CSS environment variables provide information about the virtual keyboard's position and size.
-- The [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes#virtualkeyboardpolicy) attribute specifies whether the virtual keyboard should appear on `contenteditable` elements.
+- The [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute specifies whether the virtual keyboard should appear on `contenteditable` elements.
### Opt out of the automatic virtual keyboard behavior
@@ -87,9 +86,9 @@ The code snippet below uses the `keyboard-inset-height` CSS variable to reserve
### Control the virtual keyboard on `contenteditable` elements
-By default, elements using the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute also trigger the virtual keyboard when tapped or clicked. In certain situations, it may be desirable to prevent this behavior and instead show the virtual keyboard after a different event.
+By default, elements using the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute also trigger the virtual keyboard when tapped or clicked. In certain situations, it may be desirable to prevent this behavior and instead show the virtual keyboard after a different event.
-Set the [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes#virtualkeyboardpolicy) attribute to `manual` to prevent the default handling of the virtual keyboard in the browser, and instead handle it yourself by using the {{domxref("VirtualKeyboard")}} interface's `show()` and `hide()` methods.
+Set the [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute to `manual` to prevent the default handling of the virtual keyboard in the browser, and instead handle it yourself by using the {{domxref("VirtualKeyboard")}} interface's `show()` and `hide()` methods.
The code snippet below shows how to use the `virtualkeyboardpolicy` attribute and the `navigator.virtualKeyboard.show()` method to show the virtual keyboard on double-click instead:
@@ -112,6 +111,13 @@ The code snippet below shows how to use the `virtualkeyboardpolicy` attribute an
- {{domxref('VirtualKeyboard')}} {{experimental_inline}}
- : Provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
+## Extensions to other interfaces
+
+- {{domxref("Navigator.virtualKeyboard")}} {{ReadOnlyInline}} {{experimental_inline}}
+ - : Returns a reference to the {{DOMxRef("VirtualKeyboard")}} API, to take control of the on-screen virtual keyboard.
+- {{domxref("HTMLElement.virtualkeyboardpolicy")}} {{experimental_inline}}
+ - : A string indicating whether to use the browser's default policy for showing the virtual keyboard when the element is focused, or to handle showing the virtual keyboard manually.
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/api/visibilitystateentry/index.md b/files/en-us/web/api/visibilitystateentry/index.md
new file mode 100644
index 000000000000000..27f6e0f90ab2a7b
--- /dev/null
+++ b/files/en-us/web/api/visibilitystateentry/index.md
@@ -0,0 +1,83 @@
+---
+title: VisibilityStateEntry
+slug: Web/API/VisibilityStateEntry
+page-type: web-api-interface
+status:
+ - experimental
+browser-compat: api.VisibilityStateEntry
+---
+
+{{APIRef("Performance API")}}{{seecompattable}}
+
+The **`VisibilityStateEntry`** interface provides timings of page visibility state changes, i.e., when a tab changes from the foreground to the background or vice versa.
+
+This can be used to pinpoint visibility changes on the performance timeline, and cross-reference them against other performance entries such as "first-contentful-paint" (see {{domxref("PerformancePaintTiming")}}).
+
+There are two key visibility state change times that this API reports on:
+
+- `visible`: The time when the page becomes visible (i.e. when its tab moves into the foreground).
+- `hidden`: The time when the pages become hidden (i.e. when its tab moves into the background).
+
+The performance timeline will always have a "`visibility-state`" entry with a `startTime` of `0` and a `name` representing the initial page visibility state.
+
+> **Note:** Like other Performance APIs, this API extends {{domxref("PerformanceEntry")}}.
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+This interface has no properties but it extends the properties of {{domxref("PerformanceEntry")}} by qualifying and constraining them as follows:
+
+- {{domxref("PerformanceEntry.entryType")}} {{experimental_inline}}
+ - : Returns "`visibility-state`".
+- {{domxref("PerformanceEntry.name")}} {{experimental_inline}}
+ - : Returns either `"visible"` or `"hidden"`.
+- {{domxref("PerformanceEntry.startTime")}} {{experimental_inline}}
+ - : Returns the {{domxref("DOMHighResTimeStamp","timestamp")}} when the visibility state change occurred.
+- {{domxref("PerformanceEntry.duration")}} {{experimental_inline}}
+ - : Returns 0.
+
+## Instance methods
+
+This interface has no methods.
+
+## Examples
+
+### Basic usage
+
+The following function could be used to log a table of all "`visibility-state`" performance entries to the console:
+
+```js
+function getVisibilityStateEntries() {
+ const visibilityStateEntries =
+ performance.getEntriesByType("visibility-state");
+ console.table(visibilityStateEntries);
+}
+```
+
+### Correlating visibility state changes with paint timing
+
+The below function gets a reference to all "`visibility-state`" entries and the "`first-contentful-paint`" entry, then uses {{jsxref("Array.some()")}} to test whether any of the "`hidden`" visibility entries occurred before the first contentful paint:
+
+```js
+function wasHiddenBeforeFirstContentfulPaint() {
+ const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
+ const visibilityStateEntries =
+ performance.getEntriesByType("visibility-state");
+ return visibilityStateEntries.some(
+ (e) => e.startTime < fcpEntry.startTime && e.name === "hidden",
+ );
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+[Page Visibility API](/en-US/docs/Web/API/Page_Visibility_API)
diff --git a/files/en-us/web/api/visualviewport/height/index.md b/files/en-us/web/api/visualviewport/height/index.md
index 9575397ba4ef9d5..e0fd634669187c4 100644
--- a/files/en-us/web/api/visualviewport/height/index.md
+++ b/files/en-us/web/api/visualviewport/height/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.height
+title: "VisualViewport: height property"
+short-title: height
slug: Web/API/VisualViewport/height
page-type: web-api-instance-property
browser-compat: api.VisualViewport.height
diff --git a/files/en-us/web/api/visualviewport/offsetleft/index.md b/files/en-us/web/api/visualviewport/offsetleft/index.md
index 40bfdaddcfcc34f..a499c0b8cfb8848 100644
--- a/files/en-us/web/api/visualviewport/offsetleft/index.md
+++ b/files/en-us/web/api/visualviewport/offsetleft/index.md
@@ -1,6 +1,7 @@
---
-title: VisualViewport.offsetleft
-slug: Web/API/VisualViewport/offsetleft
+title: "VisualViewport: offsetLeft property"
+short-title: offsetLeft
+slug: Web/API/VisualViewport/offsetLeft
page-type: web-api-instance-property
browser-compat: api.VisualViewport.offsetLeft
---
diff --git a/files/en-us/web/api/visualviewport/offsettop/index.md b/files/en-us/web/api/visualviewport/offsettop/index.md
index 85c2b0384ad5d0d..6dff431159272e7 100644
--- a/files/en-us/web/api/visualviewport/offsettop/index.md
+++ b/files/en-us/web/api/visualviewport/offsettop/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.offsetTop
+title: "VisualViewport: offsetTop property"
+short-title: offsetTop
slug: Web/API/VisualViewport/offsetTop
page-type: web-api-instance-property
browser-compat: api.VisualViewport.offsetTop
diff --git a/files/en-us/web/api/visualviewport/pageleft/index.md b/files/en-us/web/api/visualviewport/pageleft/index.md
index a95c17b0a6b8212..15df076b47f1ce0 100644
--- a/files/en-us/web/api/visualviewport/pageleft/index.md
+++ b/files/en-us/web/api/visualviewport/pageleft/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.pageLeft
+title: "VisualViewport: pageLeft property"
+short-title: pageLeft
slug: Web/API/VisualViewport/pageLeft
page-type: web-api-instance-property
browser-compat: api.VisualViewport.pageLeft
diff --git a/files/en-us/web/api/visualviewport/pagetop/index.md b/files/en-us/web/api/visualviewport/pagetop/index.md
index f8f5c508cc62d61..9f6d0e906cf522d 100644
--- a/files/en-us/web/api/visualviewport/pagetop/index.md
+++ b/files/en-us/web/api/visualviewport/pagetop/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.pageTop
+title: "VisualViewport: pageTop property"
+short-title: pageTop
slug: Web/API/VisualViewport/pageTop
page-type: web-api-instance-property
browser-compat: api.VisualViewport.pageTop
diff --git a/files/en-us/web/api/visualviewport/resize_event/index.md b/files/en-us/web/api/visualviewport/resize_event/index.md
index 7e66151ffb76557..2c246372b8679e8 100644
--- a/files/en-us/web/api/visualviewport/resize_event/index.md
+++ b/files/en-us/web/api/visualviewport/resize_event/index.md
@@ -1,5 +1,6 @@
---
title: "VisualViewport: resize event"
+short-title: resize
slug: Web/API/VisualViewport/resize_event
page-type: web-api-event
browser-compat: api.VisualViewport.resize_event
diff --git a/files/en-us/web/api/visualviewport/scale/index.md b/files/en-us/web/api/visualviewport/scale/index.md
index 94b3bdba70b3f78..4baef89c8796429 100644
--- a/files/en-us/web/api/visualviewport/scale/index.md
+++ b/files/en-us/web/api/visualviewport/scale/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.scale
+title: "VisualViewport: scale property"
+short-title: scale
slug: Web/API/VisualViewport/scale
page-type: web-api-instance-property
browser-compat: api.VisualViewport.scale
diff --git a/files/en-us/web/api/visualviewport/scroll_event/index.md b/files/en-us/web/api/visualviewport/scroll_event/index.md
index 660f3393822fe36..ed69b0c452c4643 100644
--- a/files/en-us/web/api/visualviewport/scroll_event/index.md
+++ b/files/en-us/web/api/visualviewport/scroll_event/index.md
@@ -1,5 +1,6 @@
---
title: "VisualViewport: scroll event"
+short-title: scroll
slug: Web/API/VisualViewport/scroll_event
page-type: web-api-event
browser-compat: api.VisualViewport.scroll_event
diff --git a/files/en-us/web/api/visualviewport/width/index.md b/files/en-us/web/api/visualviewport/width/index.md
index 2fa554355f3631f..36f3b7940a09663 100644
--- a/files/en-us/web/api/visualviewport/width/index.md
+++ b/files/en-us/web/api/visualviewport/width/index.md
@@ -1,5 +1,6 @@
---
-title: VisualViewport.width
+title: "VisualViewport: width property"
+short-title: width
slug: Web/API/VisualViewport/width
page-type: web-api-instance-property
browser-compat: api.VisualViewport.width
diff --git a/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md b/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
index b5cc92e6133fd2b..ceb079b891892ae 100644
--- a/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
+++ b/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.cancelAnimationFrame()
+title: "VRDisplay: cancelAnimationFrame() method"
+short-title: cancelAnimationFrame()
slug: Web/API/VRDisplay/cancelAnimationFrame
page-type: web-api-instance-method
status:
@@ -60,7 +61,7 @@ if (navigator.getVRDisplays) {
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
- rightEye.renderHeight
+ rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
@@ -108,5 +109,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/capabilities/index.md b/files/en-us/web/api/vrdisplay/capabilities/index.md
index 86aee0ce0e88ce4..2d2b51558c2a03f 100644
--- a/files/en-us/web/api/vrdisplay/capabilities/index.md
+++ b/files/en-us/web/api/vrdisplay/capabilities/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.capabilities
+title: "VRDisplay: capabilities property"
+short-title: capabilities
slug: Web/API/VRDisplay/capabilities
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/depthfar/index.md b/files/en-us/web/api/vrdisplay/depthfar/index.md
index 2615572f2d9f733..5610a695133dbe4 100644
--- a/files/en-us/web/api/vrdisplay/depthfar/index.md
+++ b/files/en-us/web/api/vrdisplay/depthfar/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.depthFar
+title: "VRDisplay: depthFar property"
+short-title: depthFar
slug: Web/API/VRDisplay/depthFar
page-type: web-api-instance-property
status:
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/depthnear/index.md b/files/en-us/web/api/vrdisplay/depthnear/index.md
index a9fd97254b862ce..3a18302a4f1f596 100644
--- a/files/en-us/web/api/vrdisplay/depthnear/index.md
+++ b/files/en-us/web/api/vrdisplay/depthnear/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.depthNear
+title: "VRDisplay: depthNear property"
+short-title: depthNear
slug: Web/API/VRDisplay/depthNear
page-type: web-api-instance-property
status:
@@ -44,5 +45,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/displayid/index.md b/files/en-us/web/api/vrdisplay/displayid/index.md
index 06ebed6a9653efb..844fefe62d644c6 100644
--- a/files/en-us/web/api/vrdisplay/displayid/index.md
+++ b/files/en-us/web/api/vrdisplay/displayid/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.displayId
+title: "VRDisplay: displayId property"
+short-title: displayId
slug: Web/API/VRDisplay/displayId
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/displayname/index.md b/files/en-us/web/api/vrdisplay/displayname/index.md
index 6b7e263f7733ee9..e28d0e8c2fd9b7e 100644
--- a/files/en-us/web/api/vrdisplay/displayname/index.md
+++ b/files/en-us/web/api/vrdisplay/displayname/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.displayName
+title: "VRDisplay: displayName property"
+short-title: displayName
slug: Web/API/VRDisplay/displayName
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/exitpresent/index.md b/files/en-us/web/api/vrdisplay/exitpresent/index.md
index 7a9f066809f2bba..558cce008116f17 100644
--- a/files/en-us/web/api/vrdisplay/exitpresent/index.md
+++ b/files/en-us/web/api/vrdisplay/exitpresent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.exitPresent()
+title: "VRDisplay: exitPresent() method"
+short-title: exitPresent()
slug: Web/API/VRDisplay/exitPresent
page-type: web-api-instance-method
status:
@@ -54,7 +55,7 @@ if (navigator.getVRDisplays) {
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
- rightEye.renderHeight
+ rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
@@ -93,5 +94,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/geteyeparameters/index.md b/files/en-us/web/api/vrdisplay/geteyeparameters/index.md
index b0d6efde1ac9b35..8960a62396e4f3b 100644
--- a/files/en-us/web/api/vrdisplay/geteyeparameters/index.md
+++ b/files/en-us/web/api/vrdisplay/geteyeparameters/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getEyeParameters()
+title: "VRDisplay: getEyeParameters() method"
+short-title: getEyeParameters()
slug: Web/API/VRDisplay/getEyeParameters
page-type: web-api-instance-method
status:
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getframedata/index.md b/files/en-us/web/api/vrdisplay/getframedata/index.md
index 7503ee7a91f44c2..c06c4a30cf33333 100644
--- a/files/en-us/web/api/vrdisplay/getframedata/index.md
+++ b/files/en-us/web/api/vrdisplay/getframedata/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getFrameData()
+title: "VRDisplay: getFrameData() method"
+short-title: getFrameData()
slug: Web/API/VRDisplay/getFrameData
page-type: web-api-instance-method
status:
@@ -71,7 +72,7 @@ function drawVRScene() {
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
- "projMatrix"
+ "projMatrix",
);
const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
@@ -80,7 +81,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.leftProjectionMatrix
+ frameData.leftProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
@@ -90,7 +91,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.rightProjectionMatrix
+ frameData.rightProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
@@ -120,5 +121,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getimmediatepose/index.md b/files/en-us/web/api/vrdisplay/getimmediatepose/index.md
index 93e513f98b96c57..903fcae8e80201c 100644
--- a/files/en-us/web/api/vrdisplay/getimmediatepose/index.md
+++ b/files/en-us/web/api/vrdisplay/getimmediatepose/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getImmediatePose()
+title: "VRDisplay: getImmediatePose() method"
+short-title: getImmediatePose()
slug: Web/API/VRDisplay/getImmediatePose
page-type: web-api-instance-method
status:
@@ -40,5 +41,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getlayers/index.md b/files/en-us/web/api/vrdisplay/getlayers/index.md
index fb1a9c921e0db1f..686226f6c68180c 100644
--- a/files/en-us/web/api/vrdisplay/getlayers/index.md
+++ b/files/en-us/web/api/vrdisplay/getlayers/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getLayers()
+title: "VRDisplay: getLayers() method"
+short-title: getLayers()
slug: Web/API/VRDisplay/getLayers
page-type: web-api-instance-method
status:
@@ -44,5 +45,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/getpose/index.md b/files/en-us/web/api/vrdisplay/getpose/index.md
index da539ab4aec675b..d08f99bd8e3f009 100644
--- a/files/en-us/web/api/vrdisplay/getpose/index.md
+++ b/files/en-us/web/api/vrdisplay/getpose/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.getPose()
+title: "VRDisplay: getPose() method"
+short-title: getPose()
slug: Web/API/VRDisplay/getPose
page-type: web-api-instance-method
status:
@@ -67,5 +68,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/index.md b/files/en-us/web/api/vrdisplay/index.md
index b493ea1df90c851..e447fc0c9a1690f 100644
--- a/files/en-us/web/api/vrdisplay/index.md
+++ b/files/en-us/web/api/vrdisplay/index.md
@@ -90,5 +90,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/isconnected/index.md b/files/en-us/web/api/vrdisplay/isconnected/index.md
index 3bfc41fbe45a39d..5cd3f1e49bd8880 100644
--- a/files/en-us/web/api/vrdisplay/isconnected/index.md
+++ b/files/en-us/web/api/vrdisplay/isconnected/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.isConnected
+title: "VRDisplay: isConnected property"
+short-title: isConnected
slug: Web/API/VRDisplay/isConnected
page-type: web-api-instance-property
status:
@@ -53,5 +54,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/ispresenting/index.md b/files/en-us/web/api/vrdisplay/ispresenting/index.md
index d7d8bf74a99c3c8..d42849550818b12 100644
--- a/files/en-us/web/api/vrdisplay/ispresenting/index.md
+++ b/files/en-us/web/api/vrdisplay/ispresenting/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.isPresenting
+title: "VRDisplay: isPresenting property"
+short-title: isPresenting
slug: Web/API/VRDisplay/isPresenting
page-type: web-api-instance-property
status:
@@ -36,7 +37,7 @@ function onVRExitPresent() {
errMsg += `
${err.message}`;
}
VRSamplesUtil.addError(errMsg, 2000);
- }
+ },
);
}
```
@@ -55,5 +56,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/requestanimationframe/index.md b/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
index c5053fc52c0239b..ac0964d4379fd87 100644
--- a/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
+++ b/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.requestAnimationFrame()
+title: "VRDisplay: requestAnimationFrame() method"
+short-title: requestAnimationFrame()
slug: Web/API/VRDisplay/requestAnimationFrame
page-type: web-api-instance-method
status:
@@ -71,7 +72,7 @@ function drawVRScene() {
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
- "projMatrix"
+ "projMatrix",
);
const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
@@ -80,7 +81,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.leftProjectionMatrix
+ frameData.leftProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
@@ -90,7 +91,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.rightProjectionMatrix
+ frameData.rightProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
@@ -120,5 +121,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/requestpresent/index.md b/files/en-us/web/api/vrdisplay/requestpresent/index.md
index 189f819c0bc92ea..99c26fe13eb8fed 100644
--- a/files/en-us/web/api/vrdisplay/requestpresent/index.md
+++ b/files/en-us/web/api/vrdisplay/requestpresent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.requestPresent()
+title: "VRDisplay: requestPresent() method"
+short-title: requestPresent()
slug: Web/API/VRDisplay/requestPresent
page-type: web-api-instance-method
status:
@@ -60,7 +61,7 @@ if (navigator.getVRDisplays) {
Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
canvas.height = Math.max(
leftEye.renderHeight,
- rightEye.renderHeight
+ rightEye.renderHeight,
);
// stop the normal presentation, and start the vr presentation
@@ -99,5 +100,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/resetpose/index.md b/files/en-us/web/api/vrdisplay/resetpose/index.md
index 671a233440f0b2e..4f7fdd9db52035c 100644
--- a/files/en-us/web/api/vrdisplay/resetpose/index.md
+++ b/files/en-us/web/api/vrdisplay/resetpose/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.resetPose()
+title: "VRDisplay: resetPose() method"
+short-title: resetPose()
slug: Web/API/VRDisplay/resetPose
page-type: web-api-instance-method
status:
@@ -55,5 +56,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/stageparameters/index.md b/files/en-us/web/api/vrdisplay/stageparameters/index.md
index 1454fc9ee8f8af1..cd4f916d646b94e 100644
--- a/files/en-us/web/api/vrdisplay/stageparameters/index.md
+++ b/files/en-us/web/api/vrdisplay/stageparameters/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.stageParameters
+title: "VRDisplay: stageParameters property"
+short-title: stageParameters
slug: Web/API/VRDisplay/stageParameters
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplay/submitframe/index.md b/files/en-us/web/api/vrdisplay/submitframe/index.md
index 8185e4f8f74c3ce..6a351c88ce74a78 100644
--- a/files/en-us/web/api/vrdisplay/submitframe/index.md
+++ b/files/en-us/web/api/vrdisplay/submitframe/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplay.submitFrame()
+title: "VRDisplay: submitFrame() method"
+short-title: submitFrame()
slug: Web/API/VRDisplay/submitFrame
page-type: web-api-instance-method
status:
@@ -14,7 +15,7 @@ The **`submitFrame()`** method of the {{domxref("VRDisplay")}} interface capture
> **Note:** This method was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
-The frame should subsequently be rendered using the {{domxref("VRPose")}} and matrices provided by the last call to {{domxref("getFrameData()")}}.
+The frame should subsequently be rendered using the {{domxref("VRPose")}} and matrices provided by the last call to {{domxref("VRDisplay.getFrameData()", "getFrameData()")}}.
## Syntax
@@ -69,7 +70,7 @@ function drawVRScene() {
const projectionMatrixLocation = gl.getUniformLocation(
shaderProgram,
- "projMatrix"
+ "projMatrix",
);
const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
@@ -78,7 +79,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.leftProjectionMatrix
+ frameData.leftProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
@@ -88,7 +89,7 @@ function drawVRScene() {
gl.uniformMatrix4fv(
projectionMatrixLocation,
false,
- frameData.rightProjectionMatrix
+ frameData.rightProjectionMatrix,
);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
@@ -118,5 +119,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md b/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md
index 19ed4c720e25b30..ebc74f1dc372cc8 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/canpresent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.canPresent
+title: "VRDisplayCapabilities: canPresent property"
+short-title: canPresent
slug: Web/API/VRDisplayCapabilities/canPresent
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md b/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
index 7f4370967954b04..51ff4b6cc3617b1 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/hasexternaldisplay/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.hasExternalDisplay
+title: "VRDisplayCapabilities: hasExternalDisplay property"
+short-title: hasExternalDisplay
slug: Web/API/VRDisplayCapabilities/hasExternalDisplay
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md b/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md
index 17ec61b3eaccb8d..603a9be43b2090c 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/hasorientation/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.hasOrientation
+title: "VRDisplayCapabilities: hasOrientation property"
+short-title: hasOrientation
slug: Web/API/VRDisplayCapabilities/hasOrientation
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md b/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md
index 7f09576ae13485a..ec4da601931bcec 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/hasposition/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.hasPosition
+title: "VRDisplayCapabilities: hasPosition property"
+short-title: hasPosition
slug: Web/API/VRDisplayCapabilities/hasPosition
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/index.md b/files/en-us/web/api/vrdisplaycapabilities/index.md
index bf30a15304b0006..88135307318e838 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/index.md
@@ -65,5 +65,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md b/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md
index e43845e49ae99bf..bd3c5065851c151 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/maxlayers/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayCapabilities.maxLayers
+title: "VRDisplayCapabilities: maxLayers property"
+short-title: maxLayers
slug: Web/API/VRDisplayCapabilities/maxLayers
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRDisplayCapabilities.maxLayers
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`maxLayers`** read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a number indicating the maximum number of {{domxref("VRLayerInit")}}s that the VR display can present at once (e.g. the maximum length of the array that {{domxref("Display.requestPresent()")}} can accept.)
+The **`maxLayers`** read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a number indicating the maximum number of {{domxref("VRLayerInit")}}s that the VR display can present at once (e.g. the maximum length of the array that {{domxref("VRDisplay.requestPresent()")}} can accept.)
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/display/index.md b/files/en-us/web/api/vrdisplayevent/display/index.md
index b323fee2b9cc7d7..6895dc463ec632b 100644
--- a/files/en-us/web/api/vrdisplayevent/display/index.md
+++ b/files/en-us/web/api/vrdisplayevent/display/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayEvent.display
+title: "VRDisplayEvent: display property"
+short-title: display
slug: Web/API/VRDisplayEvent/display
page-type: web-api-instance-property
status:
@@ -23,7 +24,7 @@ A {{domxref("VRDisplay")}} object.
```js
window.addEventListener("vrdisplaypresentchange", (e) => {
console.log(
- `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`
+ `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
);
});
```
@@ -40,5 +41,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/index.md b/files/en-us/web/api/vrdisplayevent/index.md
index ea2e347dae8207d..e56cf06d6affff4 100644
--- a/files/en-us/web/api/vrdisplayevent/index.md
+++ b/files/en-us/web/api/vrdisplayevent/index.md
@@ -33,7 +33,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
```js
window.addEventListener("vrdisplaypresentchange", (e) => {
console.log(
- `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`
+ `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
);
});
```
@@ -50,5 +50,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/reason/index.md b/files/en-us/web/api/vrdisplayevent/reason/index.md
index 918a3e34813e757..bae208a8b0a1472 100644
--- a/files/en-us/web/api/vrdisplayevent/reason/index.md
+++ b/files/en-us/web/api/vrdisplayevent/reason/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayEvent.reason
+title: "VRDisplayEvent: reason property"
+short-title: reason
slug: Web/API/VRDisplayEvent/reason
page-type: web-api-instance-property
status:
@@ -28,7 +29,7 @@ A string representing the reason why the event was fired. The available reasons
```js
window.addEventListener("vrdisplaypresentchange", (e) => {
console.log(
- `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`
+ `Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`,
);
});
```
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md b/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md
index 19dc800ab802934..c3da54c21d05d5b 100644
--- a/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md
+++ b/files/en-us/web/api/vrdisplayevent/vrdisplayevent/index.md
@@ -1,5 +1,6 @@
---
-title: VRDisplayEvent()
+title: "VRDisplayEvent: VRDisplayEvent() constructor"
+short-title: VRDisplayEvent()
slug: Web/API/VRDisplayEvent/VRDisplayEvent
page-type: web-api-constructor
status:
@@ -58,5 +59,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/fieldofview/index.md b/files/en-us/web/api/vreyeparameters/fieldofview/index.md
index da167b320f45a80..f11df39f9e52bee 100644
--- a/files/en-us/web/api/vreyeparameters/fieldofview/index.md
+++ b/files/en-us/web/api/vreyeparameters/fieldofview/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.fieldOfView
+title: "VREyeParameters: fieldOfView property"
+short-title: fieldOfView
slug: Web/API/VREyeParameters/fieldOfView
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/index.md b/files/en-us/web/api/vreyeparameters/index.md
index 3f6da8f7322dbd4..a7cada66d945909 100644
--- a/files/en-us/web/api/vreyeparameters/index.md
+++ b/files/en-us/web/api/vreyeparameters/index.md
@@ -68,5 +68,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md b/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md
index ca69d5793749ee3..7d68ac4dfbb187b 100644
--- a/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md
+++ b/files/en-us/web/api/vreyeparameters/maximumfieldofview/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.maximumFieldOfView
+title: "VREyeParameters: maximumFieldOfView property"
+short-title: maximumFieldOfView
slug: Web/API/VREyeParameters/maximumFieldOfView
page-type: web-api-instance-property
status:
@@ -30,6 +31,5 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
- {{domxref("VRFieldOfView")}}
--
— demos, downloads, and other resources from the Mozilla VR team.
diff --git a/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md b/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md
index f58502d5886a036..ac5e5b4cebe5927 100644
--- a/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md
+++ b/files/en-us/web/api/vreyeparameters/minimumfieldofview/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.minimumFieldOfView
+title: "VREyeParameters: minimumFieldOfView property"
+short-title: minimumFieldOfView
slug: Web/API/VREyeParameters/minimumFieldOfView
page-type: web-api-instance-property
status:
@@ -30,6 +31,5 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
- {{domxref("VRFieldOfView")}}
--
— demos, downloads, and other resources from the Mozilla VR team.
diff --git a/files/en-us/web/api/vreyeparameters/offset/index.md b/files/en-us/web/api/vreyeparameters/offset/index.md
index d1e936eaafecab6..8a6d337fc339814 100644
--- a/files/en-us/web/api/vreyeparameters/offset/index.md
+++ b/files/en-us/web/api/vreyeparameters/offset/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.offset
+title: "VREyeParameters: offset property"
+short-title: offset
slug: Web/API/VREyeParameters/offset
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/renderheight/index.md b/files/en-us/web/api/vreyeparameters/renderheight/index.md
index 6a6f84b7cdd982d..6dca6826d5e8fdd 100644
--- a/files/en-us/web/api/vreyeparameters/renderheight/index.md
+++ b/files/en-us/web/api/vreyeparameters/renderheight/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.renderHeight
+title: "VREyeParameters: renderHeight property"
+short-title: renderHeight
slug: Web/API/VREyeParameters/renderHeight
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vreyeparameters/renderwidth/index.md b/files/en-us/web/api/vreyeparameters/renderwidth/index.md
index e9081fd6d4eb85a..93256c6e612685d 100644
--- a/files/en-us/web/api/vreyeparameters/renderwidth/index.md
+++ b/files/en-us/web/api/vreyeparameters/renderwidth/index.md
@@ -1,5 +1,6 @@
---
-title: VREyeParameters.renderWidth
+title: "VREyeParameters: renderWidth property"
+short-title: renderWidth
slug: Web/API/VREyeParameters/renderWidth
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/downdegrees/index.md b/files/en-us/web/api/vrfieldofview/downdegrees/index.md
index 094dd2ed7f5a693..63ce1790ad87ff0 100644
--- a/files/en-us/web/api/vrfieldofview/downdegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/downdegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.downDegrees
+title: "VRFieldOfView: downDegrees property"
+short-title: downDegrees
slug: Web/API/VRFieldOfView/downDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/index.md b/files/en-us/web/api/vrfieldofview/index.md
index 77c6a34cb679c5d..6b6df393ddbb181 100644
--- a/files/en-us/web/api/vrfieldofview/index.md
+++ b/files/en-us/web/api/vrfieldofview/index.md
@@ -90,5 +90,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/leftdegrees/index.md b/files/en-us/web/api/vrfieldofview/leftdegrees/index.md
index db2fb9597aff133..b9d6b3574295c94 100644
--- a/files/en-us/web/api/vrfieldofview/leftdegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/leftdegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.leftDegrees
+title: "VRFieldOfView: leftDegrees property"
+short-title: leftDegrees
slug: Web/API/VRFieldOfView/leftDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/rightdegrees/index.md b/files/en-us/web/api/vrfieldofview/rightdegrees/index.md
index 52996779591fc2e..234454ee8c392a4 100644
--- a/files/en-us/web/api/vrfieldofview/rightdegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/rightdegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.rightDegrees
+title: "VRFieldOfView: rightDegrees property"
+short-title: rightDegrees
slug: Web/API/VRFieldOfView/rightDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrfieldofview/updegrees/index.md b/files/en-us/web/api/vrfieldofview/updegrees/index.md
index bb4a16048ec401c..c72ea9cc2d7d820 100644
--- a/files/en-us/web/api/vrfieldofview/updegrees/index.md
+++ b/files/en-us/web/api/vrfieldofview/updegrees/index.md
@@ -1,5 +1,6 @@
---
-title: VRFieldOfView.upDegrees
+title: "VRFieldOfView: upDegrees property"
+short-title: upDegrees
slug: Web/API/VRFieldOfView/upDegrees
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/index.md b/files/en-us/web/api/vrframedata/index.md
index 8215c09c97ff735..76c3e189e6c0f42 100644
--- a/files/en-us/web/api/vrframedata/index.md
+++ b/files/en-us/web/api/vrframedata/index.md
@@ -50,5 +50,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md b/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md
index b268fa1ad42ef88..6b34a8062f2c668 100644
--- a/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/leftprojectionmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.leftProjectionMatrix
+title: "VRFrameData: leftProjectionMatrix property"
+short-title: leftProjectionMatrix
slug: Web/API/VRFrameData/leftProjectionMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/leftviewmatrix/index.md b/files/en-us/web/api/vrframedata/leftviewmatrix/index.md
index dbd737c5db4a6ce..ab6510a81d23788 100644
--- a/files/en-us/web/api/vrframedata/leftviewmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/leftviewmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.leftViewMatrix
+title: "VRFrameData: leftViewMatrix property"
+short-title: leftViewMatrix
slug: Web/API/VRFrameData/leftViewMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/pose/index.md b/files/en-us/web/api/vrframedata/pose/index.md
index c069fe980aadb56..8b077565bb9cb6e 100644
--- a/files/en-us/web/api/vrframedata/pose/index.md
+++ b/files/en-us/web/api/vrframedata/pose/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.pose
+title: "VRFrameData: pose property"
+short-title: pose
slug: Web/API/VRFrameData/pose
page-type: web-api-instance-property
status:
@@ -34,5 +35,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md b/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md
index 8bec17b4579f5f4..bd4c2ace6fb0375 100644
--- a/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/rightprojectionmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.rightProjectionMatrix
+title: "VRFrameData: rightProjectionMatrix property"
+short-title: rightProjectionMatrix
slug: Web/API/VRFrameData/rightProjectionMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/rightviewmatrix/index.md b/files/en-us/web/api/vrframedata/rightviewmatrix/index.md
index 36df11360da02c1..da903ff8e44ebd0 100644
--- a/files/en-us/web/api/vrframedata/rightviewmatrix/index.md
+++ b/files/en-us/web/api/vrframedata/rightviewmatrix/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.rightViewMatrix
+title: "VRFrameData: rightViewMatrix property"
+short-title: rightViewMatrix
slug: Web/API/VRFrameData/rightViewMatrix
page-type: web-api-instance-property
status:
@@ -38,5 +39,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/timestamp/index.md b/files/en-us/web/api/vrframedata/timestamp/index.md
index a8e549417a700c3..0d1571de9c5bb2b 100644
--- a/files/en-us/web/api/vrframedata/timestamp/index.md
+++ b/files/en-us/web/api/vrframedata/timestamp/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData.timestamp
+title: "VRFrameData: timestamp property"
+short-title: timestamp
slug: Web/API/VRFrameData/timestamp
page-type: web-api-instance-property
status:
@@ -70,5 +71,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrframedata/vrframedata/index.md b/files/en-us/web/api/vrframedata/vrframedata/index.md
index 0c8e583a8a98263..3c30c2b3f6e3998 100644
--- a/files/en-us/web/api/vrframedata/vrframedata/index.md
+++ b/files/en-us/web/api/vrframedata/vrframedata/index.md
@@ -1,5 +1,6 @@
---
-title: VRFrameData()
+title: "VRFrameData: VRFrameData() constructor"
+short-title: VRFrameData()
slug: Web/API/VRFrameData/VRFrameData
page-type: web-api-constructor
status:
@@ -40,5 +41,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/index.md b/files/en-us/web/api/vrlayerinit/index.md
index 7ff41f684d8e8b9..bb0889b5fc9571d 100644
--- a/files/en-us/web/api/vrlayerinit/index.md
+++ b/files/en-us/web/api/vrlayerinit/index.md
@@ -55,10 +55,10 @@ if (navigator.getVRDisplays) {
{{domxref("VRLayerInit")}} objects look something like this:
-```
+```js
{
- leftBounds : [ /* … */ ],
- rightBounds: [ /* … */ ],
+ leftBounds : [/* … */],
+ rightBounds: [/* … */],
source: canvasReference
}
```
@@ -73,5 +73,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/leftbounds/index.md b/files/en-us/web/api/vrlayerinit/leftbounds/index.md
index 6ceae77d77da6f7..dc3dcb818e4c916 100644
--- a/files/en-us/web/api/vrlayerinit/leftbounds/index.md
+++ b/files/en-us/web/api/vrlayerinit/leftbounds/index.md
@@ -1,5 +1,6 @@
---
-title: VRLayerInit.leftBounds
+title: "VRLayerInit: leftBounds property"
+short-title: leftBounds
slug: Web/API/VRLayerInit/leftBounds
page-type: web-api-instance-property
status:
@@ -35,5 +36,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/rightbounds/index.md b/files/en-us/web/api/vrlayerinit/rightbounds/index.md
index 4757920c1e2e896..d514419f9f2c5ff 100644
--- a/files/en-us/web/api/vrlayerinit/rightbounds/index.md
+++ b/files/en-us/web/api/vrlayerinit/rightbounds/index.md
@@ -1,5 +1,6 @@
---
-title: VRLayerInit.rightBounds
+title: "VRLayerInit: rightBounds property"
+short-title: rightBounds
slug: Web/API/VRLayerInit/rightBounds
page-type: web-api-instance-property
status:
@@ -35,5 +36,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrlayerinit/source/index.md b/files/en-us/web/api/vrlayerinit/source/index.md
index 3520dca026abb8d..64de554ebdd8523 100644
--- a/files/en-us/web/api/vrlayerinit/source/index.md
+++ b/files/en-us/web/api/vrlayerinit/source/index.md
@@ -1,5 +1,6 @@
---
-title: VRLayerInit.source
+title: "VRLayerInit: source property"
+short-title: source
slug: Web/API/VRLayerInit/source
page-type: web-api-instance-property
status:
@@ -28,5 +29,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/angularacceleration/index.md b/files/en-us/web/api/vrpose/angularacceleration/index.md
index ff22618c75451bc..c126d8d1349accf 100644
--- a/files/en-us/web/api/vrpose/angularacceleration/index.md
+++ b/files/en-us/web/api/vrpose/angularacceleration/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.angularAcceleration
+title: "VRPose: angularAcceleration property"
+short-title: angularAcceleration
slug: Web/API/VRPose/angularAcceleration
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.angularAcceleration
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`angularAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular acceleration vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
+The **`angularAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular acceleration vector of the {{domxref("VRDisplay")}} at the current timestamp, in meters per second per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/angularvelocity/index.md b/files/en-us/web/api/vrpose/angularvelocity/index.md
index 65f50f9fa98b0a2..34274a846ca5acb 100644
--- a/files/en-us/web/api/vrpose/angularvelocity/index.md
+++ b/files/en-us/web/api/vrpose/angularvelocity/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.angularVelocity
+title: "VRPose: angularVelocity property"
+short-title: angularVelocity
slug: Web/API/VRPose/angularVelocity
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.angularVelocity
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`angularVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular velocity vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in radians per second.
+The **`angularVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the angular velocity vector of the {{domxref("VRDisplay")}} at the current timestamp, in radians per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/index.md b/files/en-us/web/api/vrpose/index.md
index 5c505b79ef8748f..22488915b436829 100644
--- a/files/en-us/web/api/vrpose/index.md
+++ b/files/en-us/web/api/vrpose/index.md
@@ -47,5 +47,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/linearacceleration/index.md b/files/en-us/web/api/vrpose/linearacceleration/index.md
index 56f0d6dcc3a0a92..d0083455e2a4c30 100644
--- a/files/en-us/web/api/vrpose/linearacceleration/index.md
+++ b/files/en-us/web/api/vrpose/linearacceleration/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.linearAcceleration
+title: "VRPose: linearAcceleration property"
+short-title: linearAcceleration
slug: Web/API/VRPose/linearAcceleration
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.linearAcceleration
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`linearAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear acceleration vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
+The **`linearAcceleration`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear acceleration vector of the {{domxref("VRDisplay")}} at the current timestamp, in meters per second per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API).
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/linearvelocity/index.md b/files/en-us/web/api/vrpose/linearvelocity/index.md
index ca64e77472d3b12..f94dcf0c76e5f97 100644
--- a/files/en-us/web/api/vrpose/linearvelocity/index.md
+++ b/files/en-us/web/api/vrpose/linearvelocity/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.linearVelocity
+title: "VRPose: linearVelocity property"
+short-title: linearVelocity
slug: Web/API/VRPose/linearVelocity
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.linearVelocity
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`linearVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear velocity vector of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second.
+The **`linearVelocity`** read-only property of the {{domxref("VRPose")}} interface returns an array representing the linear velocity vector of the {{domxref("VRDisplay")}} at the current timestamp, in meters per second.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -59,5 +60,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/orientation/index.md b/files/en-us/web/api/vrpose/orientation/index.md
index a923fdfc4f55e00..fa6a22fae141d37 100644
--- a/files/en-us/web/api/vrpose/orientation/index.md
+++ b/files/en-us/web/api/vrpose/orientation/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.orientation
+title: "VRPose: orientation property"
+short-title: orientation
slug: Web/API/VRPose/orientation
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.orientation
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`orientation`** read-only property of the {{domxref("VRPose")}} interface returns the orientation of the sensor at the current {{domxref("VRPose.timestamp")}}, as a quarternion value.
+The **`orientation`** read-only property of the {{domxref("VRPose")}} interface returns the orientation of the sensor at the current timestamp, as a quarternion value.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -45,5 +46,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrpose/position/index.md b/files/en-us/web/api/vrpose/position/index.md
index e547adfe0635b05..a05d72765da28bb 100644
--- a/files/en-us/web/api/vrpose/position/index.md
+++ b/files/en-us/web/api/vrpose/position/index.md
@@ -1,5 +1,6 @@
---
-title: VRPose.position
+title: "VRPose: position property"
+short-title: position
slug: Web/API/VRPose/position
page-type: web-api-instance-property
status:
@@ -10,7 +11,7 @@ browser-compat: api.VRPose.position
{{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
-The **`position`** read-only property of the {{domxref("VRPose")}} interface returns the position of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}} as a 3D vector.
+The **`position`** read-only property of the {{domxref("VRPose")}} interface returns the position of the {{domxref("VRDisplay")}} at the current timestamp as a 3D vector.
> **Note:** This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
@@ -46,5 +47,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/index.md b/files/en-us/web/api/vrstageparameters/index.md
index 1c27a5b57fbaf5d..07a1e2bfec20406 100644
--- a/files/en-us/web/api/vrstageparameters/index.md
+++ b/files/en-us/web/api/vrstageparameters/index.md
@@ -61,5 +61,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md b/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md
index 1eb892c7abdd63e..63bf1c2551844b7 100644
--- a/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md
+++ b/files/en-us/web/api/vrstageparameters/sittingtostandingtransform/index.md
@@ -1,5 +1,6 @@
---
-title: VRStageParameters.sittingToStandingTransform
+title: "VRStageParameters: sittingToStandingTransform property"
+short-title: sittingToStandingTransform
slug: Web/API/VRStageParameters/sittingToStandingTransform
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/sizex/index.md b/files/en-us/web/api/vrstageparameters/sizex/index.md
index f74cef9b4c3d614..5ad7c91d2ea6243 100644
--- a/files/en-us/web/api/vrstageparameters/sizex/index.md
+++ b/files/en-us/web/api/vrstageparameters/sizex/index.md
@@ -1,5 +1,6 @@
---
-title: VRStageParameters.sizeX
+title: "VRStageParameters: sizeX property"
+short-title: sizeX
slug: Web/API/VRStageParameters/sizeX
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vrstageparameters/sizey/index.md b/files/en-us/web/api/vrstageparameters/sizey/index.md
index 207028f36b27372..5ae9dac7b6aa6fb 100644
--- a/files/en-us/web/api/vrstageparameters/sizey/index.md
+++ b/files/en-us/web/api/vrstageparameters/sizey/index.md
@@ -1,5 +1,6 @@
---
-title: VRStageParameters.sizeY
+title: "VRStageParameters: sizeY property"
+short-title: sizeY
slug: Web/API/VRStageParameters/sizeY
page-type: web-api-instance-property
status:
@@ -36,5 +37,4 @@ Until all browsers have implemented the new [WebXR APIs](/en-US/docs/Web/API/Web
## See also
-- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
--
— demos, downloads, and other resources from the Mozilla VR team.
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
diff --git a/files/en-us/web/api/vttcue/align/index.md b/files/en-us/web/api/vttcue/align/index.md
index b2d3151f781c75a..1a8913a76311828 100644
--- a/files/en-us/web/api/vttcue/align/index.md
+++ b/files/en-us/web/api/vttcue/align/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.align
+title: "VTTCue: align property"
+short-title: align
slug: Web/API/VTTCue/align
page-type: web-api-instance-property
browser-compat: api.VTTCue.align
diff --git a/files/en-us/web/api/vttcue/getcueashtml/index.md b/files/en-us/web/api/vttcue/getcueashtml/index.md
index ff7f4179a95aeca..05ab2bdf34d27f6 100644
--- a/files/en-us/web/api/vttcue/getcueashtml/index.md
+++ b/files/en-us/web/api/vttcue/getcueashtml/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.getCueAsHTML()
+title: "VTTCue: getCueAsHTML() method"
+short-title: getCueAsHTML()
slug: Web/API/VTTCue/getCueAsHTML
page-type: web-api-instance-method
browser-compat: api.VTTCue.getCueAsHTML
diff --git a/files/en-us/web/api/vttcue/line/index.md b/files/en-us/web/api/vttcue/line/index.md
index f22bfbd78138c69..974fc59f6beb168 100644
--- a/files/en-us/web/api/vttcue/line/index.md
+++ b/files/en-us/web/api/vttcue/line/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.line
+title: "VTTCue: line property"
+short-title: line
slug: Web/API/VTTCue/line
page-type: web-api-instance-property
browser-compat: api.VTTCue.line
diff --git a/files/en-us/web/api/vttcue/linealign/index.md b/files/en-us/web/api/vttcue/linealign/index.md
index dda0662240dd794..e9da48bd8bdd134 100644
--- a/files/en-us/web/api/vttcue/linealign/index.md
+++ b/files/en-us/web/api/vttcue/linealign/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.lineAlign
+title: "VTTCue: lineAlign property"
+short-title: lineAlign
slug: Web/API/VTTCue/lineAlign
page-type: web-api-instance-property
browser-compat: api.VTTCue.lineAlign
diff --git a/files/en-us/web/api/vttcue/position/index.md b/files/en-us/web/api/vttcue/position/index.md
index 9e80b8cc267052f..ba681bcb0217d07 100644
--- a/files/en-us/web/api/vttcue/position/index.md
+++ b/files/en-us/web/api/vttcue/position/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.position
+title: "VTTCue: position property"
+short-title: position
slug: Web/API/VTTCue/position
page-type: web-api-instance-property
browser-compat: api.VTTCue.position
diff --git a/files/en-us/web/api/vttcue/positionalign/index.md b/files/en-us/web/api/vttcue/positionalign/index.md
index 6bbefeb986876f7..c53a01cec3cf1b2 100644
--- a/files/en-us/web/api/vttcue/positionalign/index.md
+++ b/files/en-us/web/api/vttcue/positionalign/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.positionAlign
+title: "VTTCue: positionAlign property"
+short-title: positionAlign
slug: Web/API/VTTCue/positionAlign
page-type: web-api-instance-property
browser-compat: api.VTTCue.positionAlign
diff --git a/files/en-us/web/api/vttcue/region/index.md b/files/en-us/web/api/vttcue/region/index.md
index ae3dbcbb8ac80f0..99e95ad82f8d899 100644
--- a/files/en-us/web/api/vttcue/region/index.md
+++ b/files/en-us/web/api/vttcue/region/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.region
+title: "VTTCue: region property"
+short-title: region
slug: Web/API/VTTCue/region
page-type: web-api-instance-property
browser-compat: api.VTTCue.region
diff --git a/files/en-us/web/api/vttcue/size/index.md b/files/en-us/web/api/vttcue/size/index.md
index 732ed0df460813f..e37d9b1a97c5119 100644
--- a/files/en-us/web/api/vttcue/size/index.md
+++ b/files/en-us/web/api/vttcue/size/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.size
+title: "VTTCue: size property"
+short-title: size
slug: Web/API/VTTCue/size
page-type: web-api-instance-property
browser-compat: api.VTTCue.size
diff --git a/files/en-us/web/api/vttcue/snaptolines/index.md b/files/en-us/web/api/vttcue/snaptolines/index.md
index 4909f51d5764330..5c10931f8176f54 100644
--- a/files/en-us/web/api/vttcue/snaptolines/index.md
+++ b/files/en-us/web/api/vttcue/snaptolines/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.snapToLines
+title: "VTTCue: snapToLines property"
+short-title: snapToLines
slug: Web/API/VTTCue/snapToLines
page-type: web-api-instance-property
browser-compat: api.VTTCue.snapToLines
diff --git a/files/en-us/web/api/vttcue/text/index.md b/files/en-us/web/api/vttcue/text/index.md
index bdc9257c2888c2f..801a1443a3198de 100644
--- a/files/en-us/web/api/vttcue/text/index.md
+++ b/files/en-us/web/api/vttcue/text/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.text
+title: "VTTCue: text property"
+short-title: text
slug: Web/API/VTTCue/text
page-type: web-api-instance-property
browser-compat: api.VTTCue.text
diff --git a/files/en-us/web/api/vttcue/vertical/index.md b/files/en-us/web/api/vttcue/vertical/index.md
index 3fc97f6589372a8..bd883cdec9154dd 100644
--- a/files/en-us/web/api/vttcue/vertical/index.md
+++ b/files/en-us/web/api/vttcue/vertical/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue.vertical
+title: "VTTCue: vertical property"
+short-title: vertical
slug: Web/API/VTTCue/vertical
page-type: web-api-instance-property
browser-compat: api.VTTCue.vertical
diff --git a/files/en-us/web/api/vttcue/vttcue/index.md b/files/en-us/web/api/vttcue/vttcue/index.md
index d32c91118703829..ef83e8f231003a0 100644
--- a/files/en-us/web/api/vttcue/vttcue/index.md
+++ b/files/en-us/web/api/vttcue/vttcue/index.md
@@ -1,5 +1,6 @@
---
-title: VTTCue()
+title: "VTTCue: VTTCue() constructor"
+short-title: VTTCue()
slug: Web/API/VTTCue/VTTCue
page-type: web-api-constructor
browser-compat: api.VTTCue.VTTCue
diff --git a/files/en-us/web/api/wakelock/index.md b/files/en-us/web/api/wakelock/index.md
index d9abbf1406c8f4f..c66ff36565edda3 100644
--- a/files/en-us/web/api/wakelock/index.md
+++ b/files/en-us/web/api/wakelock/index.md
@@ -7,9 +7,9 @@ browser-compat: api.WakeLock
{{APIRef("Screen Wake Lock API")}}{{SecureContext_Header}}
-The **`WakeLock`** interface of the [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) prevents device screens from dimming or locking when an application needs to keep running.
+The **`WakeLock`** interface of the {{domxref("Screen Wake Lock API", "", "", "nocode")}} prevents device screens from dimming or locking when an application needs to keep running.
-The system wake lock is exposed through the global {{domxref('Navigator.wakeLock')}} property.
+The system wake lock is exposed through the {{domxref('Navigator.wakeLock')}} property.
## Instance methods
@@ -36,3 +36,7 @@ try {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelock/request/index.md b/files/en-us/web/api/wakelock/request/index.md
index 17798794bd6d2c6..f70cee32339850c 100644
--- a/files/en-us/web/api/wakelock/request/index.md
+++ b/files/en-us/web/api/wakelock/request/index.md
@@ -1,5 +1,6 @@
---
-title: WakeLock.request()
+title: "WakeLock: request() method"
+short-title: request()
slug: Web/API/WakeLock/request
page-type: web-api-instance-method
browser-compat: api.WakeLock.request
@@ -9,8 +10,7 @@ browser-compat: api.WakeLock.request
The **`request()`** method of the
{{domxref("WakeLock")}} interface returns a {{jsxref("Promise")}} that resolves with a
-{{domxref("WakeLockSentinel")}} object, which allows control over screen dimming and
-locking.
+{{domxref("WakeLockSentinel")}} object, which allows control over screen dimming and locking.
## Syntax
@@ -20,13 +20,14 @@ request(type)
### Parameters
-- `type`
+- `type` {{optional_inline}}
- - : Options are as follows:
+ - : A string specifying the screen wake lock type, from among the following enumerated types:
- - `'screen'`
- - : Requests a screen wake lock. Prevents devices from
- dimming or locking the screen.
+ - `screen`
+ - : Prevents the screen from turning off. Only visible documents can acquire the screen wake lock.
+
+If no `type` parameter is explicitly specified, the `request()` method defaults to using the `screen` type.
### Return value
@@ -34,13 +35,13 @@ A {{jsxref("Promise")}} that resolves with a {{domxref("WakeLockSentinel")}} obj
### Exceptions
-- `NotAllowedError`
+- `NotAllowedError` {{domxref("DOMException")}}
- : Thrown when wake lock is not available, which can happen because:
- Use of this feature is blocked by a [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
- The document is not fully active.
- - The document is hidden.
+ - The document's visibility state is `hidden`.
- The {{Glossary("User Agent")}} could not acquire platform's wake lock.
## Examples
@@ -73,5 +74,4 @@ requestWakeLock();
## See also
-- {{DOMxRef("WakeLock")}}
-- {{DOMxRef("Navigator.wakeLock")}}
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/index.md b/files/en-us/web/api/wakelocksentinel/index.md
index e06e5093b633e9a..e499c425c306173 100644
--- a/files/en-us/web/api/wakelocksentinel/index.md
+++ b/files/en-us/web/api/wakelocksentinel/index.md
@@ -7,7 +7,7 @@ browser-compat: api.WakeLockSentinel
{{securecontext_header}}{{APIRef("Screen Wake Lock API")}}
-The **`WakeLockSentinel`** interface of the [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API) provides a handle to the underlying platform wake lock and can be manually released and reacquired. An {{jsxref('Object')}} representing the wake lock is returned via the {{domxref('WakeLock.request()','navigator.wakelock.request()')}} method.
+The **`WakeLockSentinel`** interface of the {{domxref("Screen Wake Lock API", "", "", "nocode")}} provides a handle to the underlying platform wake lock and can be manually released and reacquired. An {{jsxref('Object')}} representing the wake lock is returned via the {{domxref('WakeLock.request()','navigator.wakeLock.request()')}} method.
An acquired `WakeLockSentinel` can be released manually via the {{domxref('WakeLockSentinel.release','release()')}} method, or automatically via the platform wake lock. This can happen if the document becomes inactive or looses visibility, if the device is low on power or the user turns on a power save mode. Releasing all `WakeLockSentinel` instances of a given wake lock type will cause the underlying platform wake lock to be released.
@@ -15,7 +15,7 @@ An acquired `WakeLockSentinel` can be released manually via the {{domxref('WakeL
## Instance properties
-_This interface provides the following properties._
+_Also inherits properties from its parent interface, {{DOMxRef("EventTarget")}}._
- {{domxref("WakeLockSentinel.released", "released")}} {{ReadOnlyInline}}
- : Returns a boolean indicating whether the `WakeLockSentinel` has been released.
@@ -24,18 +24,20 @@ _This interface provides the following properties._
- : Returns a string representation of the currently acquired `WakeLockSentinel` type.
Return values are:
- - `'screen'`: A screen wake lock. Prevents devices from dimming or locking the screen.
-
-## Events
-
-- {{domxref("WakeLockSentinel.release_event", "release")}}
- - : Fired when the {{domxref('WakeLockSentinel.release','release()')}} method is called or the wake lock is released by the user agent.
+ - `screen`: A screen wake lock. Prevents devices from dimming or locking the screen.
## Instance methods
+_Also inherits methods from its parent interface, {{DOMxRef("EventTarget")}}._
+
- {{domxref('WakeLockSentinel.release()', 'release()')}}
- : Releases the `WakeLockSentinel`, returning a {{jsxref("Promise")}} that is resolved once the sentinel has been successfully released.
+## Events
+
+- {{domxref("WakeLockSentinel.release_event", "release")}}
+ - : Fired when the {{domxref('WakeLockSentinel.release','release()')}} method is called or the wake lock is released by the user agent.
+
## Examples
In this example we create an asynchronous function which requests a `WakeLockSentinel`. Once acquired we listen for the `release` event which can be used to give appropriate UI feedback. The sentinel can be acquired or released via appropriate interactions.
@@ -78,3 +80,7 @@ wakeLockOffButton.addEventListener("click", () => {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/release/index.md b/files/en-us/web/api/wakelocksentinel/release/index.md
index 621b61aa0d77ea9..e3add30b5c44782 100644
--- a/files/en-us/web/api/wakelocksentinel/release/index.md
+++ b/files/en-us/web/api/wakelocksentinel/release/index.md
@@ -1,5 +1,6 @@
---
-title: WakeLockSentinel.release()
+title: "WakeLockSentinel: release() method"
+short-title: release()
slug: Web/API/WakeLockSentinel/release
page-type: web-api-instance-method
browser-compat: api.WakeLockSentinel.release
@@ -24,7 +25,7 @@ None.
### Return value
-Returns a {{jsxref("Promise")}} that resolves with `undefined`
+Returns a {{jsxref("Promise")}} that resolves with `undefined`.
### Exceptions
@@ -52,5 +53,4 @@ wakeLockOffButton.addEventListener("click", () => {
## See also
-- {{DOMxRef("WakeLockSentinel")}}
-- {{DOMxRef("WakeLock.request", "navigator.wakeLock.request()")}}
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/release_event/index.md b/files/en-us/web/api/wakelocksentinel/release_event/index.md
index 5f90b832149a0bb..fb51fc39b1b8d0f 100644
--- a/files/en-us/web/api/wakelocksentinel/release_event/index.md
+++ b/files/en-us/web/api/wakelocksentinel/release_event/index.md
@@ -1,5 +1,6 @@
---
title: "WakeLockSentinel: release event"
+short-title: release
slug: Web/API/WakeLockSentinel/release_event
page-type: web-api-event
browser-compat: api.WakeLockSentinel.release_event
@@ -16,7 +17,7 @@ power save mode.
## Syntax
-Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event-handler property.
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("release", (event) => {});
@@ -46,3 +47,7 @@ wakeLock.addEventListener("release", () => {
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/released/index.md b/files/en-us/web/api/wakelocksentinel/released/index.md
index 9aecc7bb4724cac..4729171661a1e90 100644
--- a/files/en-us/web/api/wakelocksentinel/released/index.md
+++ b/files/en-us/web/api/wakelocksentinel/released/index.md
@@ -1,23 +1,18 @@
---
-title: WakeLockSentinel.released
+title: "WakeLockSentinel: released property"
+short-title: released
slug: Web/API/WakeLockSentinel/released
page-type: web-api-instance-property
browser-compat: api.WakeLockSentinel.released
---
-{{APIRef("Screen Wake Lock API")}}
+{{APIRef("Screen Wake Lock API")}}{{SecureContext_Header}}
-The read-only **`released`** property of the
+The **`released`** read-only property of the
{{domxref("WakeLockSentinel")}} interface returns a boolean that indicates whether
a {{domxref("WakeLockSentinel")}} has been released yet.
-## Syntax
-
-```js-nolint
-const released = sentinel.released
-```
-
-### Value
+## Value
A boolean value, that is `false` until the
{{domxref("WakeLockSentinel")}} has been released (either through a call to
@@ -48,3 +43,7 @@ await sentinel.release();
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/wakelocksentinel/type/index.md b/files/en-us/web/api/wakelocksentinel/type/index.md
index 1e4c3d90432dac3..a568ce371f8071d 100644
--- a/files/en-us/web/api/wakelocksentinel/type/index.md
+++ b/files/en-us/web/api/wakelocksentinel/type/index.md
@@ -1,5 +1,6 @@
---
-title: WakeLockSentinel.type
+title: "WakeLockSentinel: type property"
+short-title: type
slug: Web/API/WakeLockSentinel/type
page-type: web-api-instance-property
browser-compat: api.WakeLockSentinel.type
@@ -7,14 +8,14 @@ browser-compat: api.WakeLockSentinel.type
{{APIRef("Screen Wake Lock API")}}{{SecureContext_Header}}
-The read-only **`type`** property of the
+The **`type`** read-only property of the
{{domxref("WakeLockSentinel")}} interface returns a string
representation of the currently acquired {{domxref("WakeLockSentinel")}} type.
-### Value
+## Value
A string representation of the currently acquired wake lock type.
-The type 'screen'` is a screen wake lock. It prevents devices from dimming or locking the screen.
+The type `screen` is a screen wake lock. It prevents devices from dimming or locking the screen.
## Examples
@@ -37,3 +38,7 @@ requestWakeLock();
## Browser compatibility
{{Compat}}
+
+## See also
+
+- [Stay awake with the Screen Wake Lock API](https://developer.chrome.com/docs/capabilities/web-apis/wake-lock/)
diff --git a/files/en-us/web/api/waveshapernode/curve/index.md b/files/en-us/web/api/waveshapernode/curve/index.md
index 6f143016d7435d4..e9423b687ac20d8 100644
--- a/files/en-us/web/api/waveshapernode/curve/index.md
+++ b/files/en-us/web/api/waveshapernode/curve/index.md
@@ -1,5 +1,6 @@
---
-title: WaveShaperNode.curve
+title: "WaveShaperNode: curve property"
+short-title: curve
slug: Web/API/WaveShaperNode/curve
page-type: web-api-instance-property
browser-compat: api.WaveShaperNode.curve
@@ -21,7 +22,7 @@ A {{jsxref("Float32Array")}}.
## Examples
-See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#example) for example code.
+See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#examples) for example code.
## Specifications
diff --git a/files/en-us/web/api/waveshapernode/index.md b/files/en-us/web/api/waveshapernode/index.md
index f509db7c79968eb..ef2bbc5ee34c301 100644
--- a/files/en-us/web/api/waveshapernode/index.md
+++ b/files/en-us/web/api/waveshapernode/index.md
@@ -60,7 +60,7 @@ _No specific method; inherits methods from its parent, {{domxref("AudioNode")}}_
## Example
-See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#example) for example code.
+See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#examples) for example code.
## Specifications
diff --git a/files/en-us/web/api/waveshapernode/oversample/index.md b/files/en-us/web/api/waveshapernode/oversample/index.md
index 536c20c5a492e55..367c8860f45295d 100644
--- a/files/en-us/web/api/waveshapernode/oversample/index.md
+++ b/files/en-us/web/api/waveshapernode/oversample/index.md
@@ -1,5 +1,6 @@
---
-title: WaveShaperNode.oversample
+title: "WaveShaperNode: oversample property"
+short-title: oversample
slug: Web/API/WaveShaperNode/oversample
page-type: web-api-instance-property
browser-compat: api.WaveShaperNode.oversample
@@ -25,7 +26,7 @@ One of `'none'`, `'2x'`, or `'4x'`.
## Examples
-See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#example) for example code.
+See [`BaseAudioContext.createWaveShaper()`](/en-US/docs/Web/API/BaseAudioContext/createWaveShaper#examples) for example code.
## Specifications
diff --git a/files/en-us/web/api/waveshapernode/waveshapernode/index.md b/files/en-us/web/api/waveshapernode/waveshapernode/index.md
index 32ca1925085b662..c9e48544d2e8c23 100644
--- a/files/en-us/web/api/waveshapernode/waveshapernode/index.md
+++ b/files/en-us/web/api/waveshapernode/waveshapernode/index.md
@@ -1,5 +1,6 @@
---
-title: WaveShaperNode()
+title: "WaveShaperNode: WaveShaperNode() constructor"
+short-title: WaveShaperNode()
slug: Web/API/WaveShaperNode/WaveShaperNode
page-type: web-api-constructor
browser-compat: api.WaveShaperNode.WaveShaperNode
diff --git a/files/en-us/web/api/web_animations_api/keyframe_formats/index.md b/files/en-us/web/api/web_animations_api/keyframe_formats/index.md
index ccfcf0265e94dcf..270d0d9d0e02c70 100644
--- a/files/en-us/web/api/web_animations_api/keyframe_formats/index.md
+++ b/files/en-us/web/api/web_animations_api/keyframe_formats/index.md
@@ -2,10 +2,9 @@
title: Keyframe Formats
slug: Web/API/Web_Animations_API/Keyframe_Formats
page-type: guide
-browser-compat: api.Element.animate
---
-{{APIRef("Web Animations API")}}
+{{DefaultAPISidebar("Web Animations")}}
{{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}, and {{domxref("KeyframeEffect.setKeyframes()")}} all accept objects formatted to represent a set of keyframes. There are several options to this format, which are explained below.
@@ -29,7 +28,7 @@ There are two different ways to format keyframes:
color: "#000",
},
],
- 2000
+ 2000,
);
```
@@ -38,7 +37,7 @@ There are two different ways to format keyframes:
```js
element.animate(
[{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
- 2000
+ 2000,
);
```
@@ -55,7 +54,7 @@ There are two different ways to format keyframes:
{ opacity: 0.1, easing: "ease-in" },
{ opacity: 0 },
],
- 2000
+ 2000,
);
```
@@ -69,7 +68,7 @@ There are two different ways to format keyframes:
opacity: [0, 1], // [ from, to ]
color: ["#fff", "#000"], // [ from, to ]
},
- 2000
+ 2000,
);
```
@@ -81,7 +80,7 @@ There are two different ways to format keyframes:
opacity: [0, 1], // offset: 0, 1
backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
},
- 2000
+ 2000,
);
```
@@ -94,7 +93,7 @@ There are two different ways to format keyframes:
offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
easing: ["ease-in", "ease-out"],
},
- 2000
+ 2000,
);
```
@@ -114,7 +113,7 @@ We have only specified the end state of the animation, and the beginning state i
## Attributes
-Keyframes may specify property-value pairs for any of the {{cssxref("CSS_animated_properties", "animatable CSS properties")}}. The property names are specified using camel-case so for example {{cssxref("background-color")}} becomes `backgroundColor` and {{cssxref("background-position-x")}} becomes `backgroundPositionX`. Shorthand values such as {{cssxref("margin")}} are also permitted.
+Keyframes may specify property-value pairs for any of the {{cssxref("CSS_animated_properties", "animatable CSS properties")}}. The property names are specified using {{Glossary("camel_case", "camel case")}} so for example {{cssxref("background-color")}} becomes `backgroundColor` and {{cssxref("background-position-x")}} becomes `backgroundPositionX`. Shorthand values such as {{cssxref("margin")}} are also permitted.
Two exceptional CSS properties are:
@@ -126,18 +125,10 @@ The following special attributes may also be specified:
- offset
- : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. If this value is `null` or missing, the keyframe will be evenly spaced between adjacent keyframes.
- easing
- - : The [timing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series.
+ - : The [easing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series.
- composite
- : The {{domxref("KeyframeEffect.composite")}} operation used to combine the values specified in this keyframe with the underlying value. This will be `auto` if the composite operation specified on the effect is being used.
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
## See also
- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
index 9860f56678a8aac..59d16b8a14594bb 100644
--- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
+++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
@@ -10,7 +10,7 @@ The Web Animations API lets us construct animations and control their playback w
## Meet the Web Animations API
-The [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) and [CSS Transitions](/en-US/docs/Web/CSS/CSS_Transitions), and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web, letting the browser make its own internal optimizations without hacks, coercion, or {{domxref("Window.requestAnimationFrame()")}}.
+The [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) and [CSS Transitions](/en-US/docs/Web/CSS/CSS_transitions), and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web, letting the browser make its own internal optimizations without hacks, coercion, or {{domxref("Window.requestAnimationFrame()")}}.
With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques such as writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job. Let's see what it can do!
@@ -112,7 +112,7 @@ document.getElementById("alice").animate(
{
duration: 3000,
iterations: Infinity,
- }
+ },
);
```
@@ -125,7 +125,7 @@ document.getElementById("alice").animate(
{ color: "#431236", offset: 0.3 },
{ transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
],
- 3000
+ 3000,
);
```
@@ -150,7 +150,7 @@ const nommingCake = document
fill: "forwards",
easing: "steps(4, end)",
duration: aliceChange.effect.getComputedTiming().duration / 2,
- }
+ },
);
```
@@ -233,6 +233,35 @@ document.addEventListener("touchstart", goFaster);
The background elements also have `playbackRate`s that are impacted when you click or tap. What happens when you make Alice and the Red Queen run twice as fast? What happens when you let them slow down?
+## Persisting animation styles
+
+When animating elements, a common use case is to persist the final state of the animation, after the animation has finished. One method sometimes used for this is to set the animation's [fill mode](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill) to `forwards`. However, it is not recommended to use fill modes to persist the effect of an animation indefinitely, for two reasons:
+
+- The browser has to maintain the state of the animation while it is still active, so the animation continues to consume resources even though it is no longer animating. Note that this is somewhat alleviated by the browser [automatically removing filling animations](#automatically_removing_filling_animations).
+- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed.
+
+A better approach is to use the {{domxref("Animation.commitStyles()")}} method. This writes the computed values of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes#style) attribute, after which the element can be restyled normally.
+
+## Automatically removing filling animations
+
+It is possible to trigger a large number of animations on the same element. If they are indefinite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak. For this reason, browsers automatically remove filling animations after they are replaced by newer animations, unless the developer explicitly specifies to keep them.
+
+Animations are removed when all of the following are true:
+
+- The animation is filling (its `fill` is `forwards` if it is playing forwards, `backwards` if it is playing backwards, or `both`).
+- The animation is finished. (Note that because of the `fill` it will still be in effect.)
+- The animation's timeline is monotonically increasing. (This is always true for {{domxref("DocumentTimeline")}}; other timelines such as {{cssxref("scroll-timeline")}} can run backwards.)
+- The animation is not being controlled by declarative markup such as CSS.
+- Every styling effect of the animation's {{domxref("AnimationEffect")}} is being overridden by another animation that also satisfies all the conditions above. (Typically, when two animations would set the same style property of the same element, the one created last overrides the other.)
+
+The first four conditions ensure that, without intervention by JavaScript code, the animation's effect will never change or end. The last condition ensures that the animation will never actually affect the style of any element: it has been entirely replaced.
+
+When the animation is automatically removed, the animation's {{domxref("animation/remove_event", "remove")}} event fires.
+
+To prevent the browser from automatically removing animations, call the animation's {{domxref("Animation.persist", "persist()")}} method.
+
+The animation's {{domxref("animation.replaceState")}} property will be `removed` if the animation has been removed, `persisted` if you have called {{domxref("Animation.persist", "persist()")}} on the animation, or `active` otherwise.
+
## Getting information out of animations
Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That's impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("Document.getAnimations")}} method to loop over each animation on the page and halve their `playbackRate`s, like so:
@@ -267,7 +296,7 @@ const aliceChange = document
duration: 8000,
easing: "ease-in-out",
fill: "both",
- }
+ },
);
```
diff --git a/files/en-us/web/api/web_audio_api/advanced_techniques/index.md b/files/en-us/web/api/web_audio_api/advanced_techniques/index.md
index d02bfd8e02edff0..a16efd82835b14a 100644
--- a/files/en-us/web/api/web_audio_api/advanced_techniques/index.md
+++ b/files/en-us/web/api/web_audio_api/advanced_techniques/index.md
@@ -8,7 +8,7 @@ page-type: guide
In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We will introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and looking for an introduction to their application with the Web Audio API, you've come to the right place.
-> **Note:** You can find the source code for the demo below on GitHub in the [step-sequencer](https://github.com/mdn/webaudio-examples/tree/master/step-sequencer) subdirectory of the MDN [webaudio-examples](https://github.com/mdn/webaudio-examples) repo. You can also see the [live demo](https://mdn.github.io/webaudio-examples/step-sequencer/).
+> **Note:** You can find the source code for the demo below on GitHub in the [step-sequencer](https://github.com/mdn/webaudio-examples/tree/main/step-sequencer) subdirectory of the MDN [webaudio-examples](https://github.com/mdn/webaudio-examples) repo. You can also see the [live demo](https://mdn.github.io/webaudio-examples/step-sequencer/).
## Demo
@@ -152,7 +152,7 @@ attackControl.addEventListener(
(ev) => {
attackTime = parseInt(ev.target.value, 10);
},
- false
+ false,
);
let releaseTime = 0.5;
@@ -162,7 +162,7 @@ releaseControl.addEventListener(
(ev) => {
releaseTime = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -271,7 +271,7 @@ hzControl.addEventListener(
(ev) => {
pulseHz = parseInt(ev.target.value, 10);
},
- false
+ false,
);
let lfoHz = 30;
@@ -281,7 +281,7 @@ lfoControl.addEventListener(
(ev) => {
lfoHz = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -418,7 +418,7 @@ durControl.addEventListener(
(ev) => {
noiseDuration = parseFloat(ev.target.value);
},
- false
+ false,
);
let bandHz = 1000;
@@ -428,7 +428,7 @@ bandControl.addEventListener(
(ev) => {
bandHz = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -553,7 +553,7 @@ rateControl.addEventListener(
(ev) => {
playbackRate = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
@@ -581,7 +581,7 @@ A common problem with digital audio applications is getting the sounds to play i
We could schedule our voices to play within a `for` loop; however, the biggest problem with this is updating while it is playing, and we've already implemented UI controls to do so. Also, it would be really nice to consider an instrument-wide BPM control. The best way to get our voices to play on the beat is to create a scheduling system, whereby we look ahead at when the notes will play and push them into a queue. We can start them at a precise time with the `currentTime` property and also consider any changes.
-> **Note:** This is a much stripped down version of [Chris Wilson's A Tale Of Two Clocks (2013)](https://web.dev/audio-scheduling/) article, which goes into this method with much more detail. There's no point repeating it all here, but we highly recommend reading this article and using this method. Much of the code here is taken from his [metronome example](https://github.com/cwilso/metronome/blob/master/js/metronome.js), which he references in the article.
+> **Note:** This is a much stripped down version of [Chris Wilson's A Tale Of Two Clocks (2013)](https://web.dev/articles/audio-scheduling) article, which goes into this method with much more detail. There's no point repeating it all here, but we highly recommend reading this article and using this method. Much of the code here is taken from his [metronome example](https://github.com/cwilso/metronome/blob/master/js/metronome.js), which he references in the article.
Let's start by setting up our default BPM (beats per minute), which will also be user-controllable via — you guessed it — another range input.
@@ -594,7 +594,7 @@ bpmControl.addEventListener(
(ev) => {
tempo = parseInt(ev.target.value, 10);
},
- false
+ false,
);
```
diff --git a/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index 2655267afdabb4a..14d5f0c7c7a9013 100644
--- a/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -100,7 +100,7 @@ If you use this call, you will get a mono buffer (single-channel buffer) that, w
The Web Audio API uses a planar buffer format. The left and right channels are stored like this:
-```
+```plain
LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)
```
@@ -108,7 +108,7 @@ This structure is widespread in audio processing, making it easy to process each
The alternative is to use an interleaved buffer format:
-```
+```plain
LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)
```
diff --git a/files/en-us/web/api/web_audio_api/best_practices/index.md b/files/en-us/web/api/web_audio_api/best_practices/index.md
index 2f58cb6f10cd9e6..533154afb5a9175 100644
--- a/files/en-us/web/api/web_audio_api/best_practices/index.md
+++ b/files/en-us/web/api/web_audio_api/best_practices/index.md
@@ -54,7 +54,7 @@ button.addEventListener(
const audioCtx = new AudioContext();
// Do something with the audio context
},
- false
+ false,
);
```
@@ -72,7 +72,7 @@ button.addEventListener(
audioCtx.resume();
}
},
- false
+ false,
);
```
diff --git a/files/en-us/web/api/web_audio_api/index.md b/files/en-us/web/api/web_audio_api/index.md
index 5db0d049f9b7533..fdefc9d7d61901a 100644
--- a/files/en-us/web/api/web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/index.md
@@ -213,9 +213,8 @@ You can find a number of examples at our [webaudio-example repo](https://github.
- [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
- [Web audio spatialization basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)
- [Controlling multiple parameters with ConstantSourceNode](/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode)
-- [Mixing Positional Audio and WebGL (2012)](https://web.dev/webaudio-positional-audio/)
-- [Developing Game Audio with the Web Audio API (2012)](https://auth.web.dev/webaudio-games/)
-- [Porting webkitAudioContext code to standards based AudioContext](/en-US/docs/Web/API/Web_Audio_API/Migrating_from_webkitAudioContext)
+- [Mixing Positional Audio and WebGL (2012)](https://web.dev/articles/webaudio-positional-audio)
+- [Developing Game Audio with the Web Audio API (2012)](https://web.dev/articles/webaudio-games)
### Libraries
diff --git a/files/en-us/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md b/files/en-us/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
deleted file mode 100644
index 3599c27c713e9aa..000000000000000
--- a/files/en-us/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
+++ /dev/null
@@ -1,411 +0,0 @@
----
-title: Migrating from webkitAudioContext
-slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext
-page-type: guide
----
-
-{{DefaultAPISidebar("Web Audio API")}}
-
-In this article, we cover the differences in Web Audio API since it was first implemented in WebKit and how to update your code to use the modern Web Audio API.
-
-The Web Audio standard was first implemented in [WebKit](https://webkit.org/), and the implementation was built in parallel with the work on the [specification](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) of the API. As the specification evolved and changes were made to the spec, some of the old implementation pieces were not removed from the WebKit (and Blink) implementations due to backwards compatibility reasons.
-
-New engines implementing the Web Audio spec (such as Gecko) will only implement the official, final version of the specification, which means that code using `webkitAudioContext` or old naming conventions in the Web Audio specification may not immediately work out of the box in a compliant Web Audio implementation. This article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based {{domxref("AudioContext")}}, which will work across different browser engines.
-
-> **Note:** There is a library called [webkitAudioContext monkeypatch](https://github.com/cwilso/webkitAudioContext-MonkeyPatch), which automatically fixes some of these changes to make most code targeting `webkitAudioContext` to work on the standards based `AudioContext` out of the box, but it currently doesn't handle all of the cases below. Please consult the [README file](https://github.com/cwilso/webkitAudioContext-MonkeyPatch/blob/gh-pages/README.md) for that library to see a list of APIs that are automatically handled by it.
-
-## Changes to the creator methods
-
-Three of the creator methods on `webkitAudioContext` have been renamed in {{domxref("AudioContext")}}.
-
-- `createGainNode()` has been renamed to {{domxref("createGain")}}.
-- `createDelayNode()` has been renamed to {{domxref("createDelay")}}.
-- `createJavaScriptNode()` has been renamed to {{domxref("createScriptProcessor")}}.
-
-These are simple renames that were made in order to improve the consistency of these method names on {{domxref("AudioContext")}}. If your code uses either of these names, like in the example below:
-
-```js
-// Old method names
-const gain = context.createGainNode();
-const delay = context.createDelayNode();
-const js = context.createJavaScriptNode(1024);
-```
-
-you can rename the methods to look like this:
-
-```js
-// New method names
-const gain = context.createGain();
-const delay = context.createDelay();
-const js = context.createScriptProcessor(1024);
-```
-
-The semantics of these methods remain the same in the renamed versions.
-
-## Changes to starting and stopping nodes
-
-In `webkitAudioContext`, there are two ways to start and stop {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}: the `noteOn()` and `noteOff()` methods, and the `start()` and `stop()` methods. ({{domxref("AudioBufferSourceNode")}} has yet another way of starting output: the `noteGrainOn()` method.) The `noteOn()`/`noteGrainOn()`/`noteOff()` methods were the original way to start/stop output in these nodes, and in the newer versions of the specification, the `noteOn()` and `noteGrainOn()` methods were consolidated into a single `start()` method, and the `noteOff()` method was renamed to the `stop()` method.
-
-In order to port your code, you can just rename the method that you're using. For example, if you have code like the below:
-
-```js
-const osc = context.createOscillator();
-osc.noteOn(1);
-osc.noteOff(1.5);
-
-const src = context.createBufferSource();
-src.noteGrainOn(1, 0.25);
-src.noteOff(2);
-```
-
-you can change it like this in order to port it to the standard AudioContext API:
-
-```js
-const osc = context.createOscillator();
-osc.start(1);
-osc.stop(1.5);
-
-const src = context.createBufferSource();
-src.start(1, 0.25);
-src.stop(2);
-```
-
-## Remove synchronous buffer creation
-
-In the old WebKit implementation of Web Audio, there were two versions of `createBuffer()`, one which created an initially empty buffer, and one which took an existing {{jsxref("ArrayBuffer")}} containing encoded audio, decoded it and returned the result in the form of an {{domxref("AudioBuffer")}}. The latter version of `createBuffer()` was potentially expensive, because it had to decode the audio buffer synchronously, and with the buffer being arbitrarily large, it could take a lot of time for this method to complete its work, and no other part of your web page's code could execute in the mean time.
-
-Because of these problems, this version of the `createBuffer()` method has been removed, and you should use the asynchronous `decodeAudioData()` method instead.
-
-The example below shows old code which downloads an audio file over the network, and then decoded it using `createBuffer()`:
-
-```js
-const xhr = new XMLHttpRequest();
-xhr.open("GET", "/path/to/audio.ogg", true);
-xhr.responseType = "arraybuffer";
-xhr.send();
-xhr.onload = () => {
- const decodedBuffer = context.createBuffer(xhr.response, false);
- if (decodedBuffer) {
- // Decoding was successful, do something useful with the audio buffer
- } else {
- alert("Decoding the audio buffer failed");
- }
-};
-```
-
-Converting this code to use `decodeAudioData()` is relatively simple, as can be seen below:
-
-```js
-const xhr = new XMLHttpRequest();
-xhr.open("GET", "/path/to/audio.ogg", true);
-xhr.responseType = "arraybuffer";
-xhr.send();
-xhr.onload = () => {
- context.decodeAudioData(
- xhr.response,
- (decodedBuffer) => {
- // Decoding was successful, do something useful with the audio buffer
- },
- () => {
- alert("Decoding the audio buffer failed");
- }
- );
-};
-```
-
-Note that the `decodeAudioData()` method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful. This means that you may need to restructure your code to run the part which happened after the `createBuffer()` call in the success callback, as you can see in the example above.
-
-## Renaming of AudioParam.setTargetValueAtTime
-
-The `setTargetValueAtTime()` method on the {{domxref("AudioParam")}} interface has been renamed to `setTargetAtTime()`. This is also a simple rename to improve the understandability of the API, and the semantics of the method are the same. If your code is using `setTargetValueAtTime()`, you can rename it to use `setTargetAtTime()`. For example, if we have code that looks like this:
-
-```js
-const gainNode = context.createGain();
-gainNode.gain.setTargetValueAtTime(0.0, 10.0, 1.0);
-```
-
-you can rename the method, and be compliant with the standard, like so:
-
-```js
-const gainNode = context.createGain();
-gainNode.gain.setTargetAtTime(0.0, 10.0, 1.0);
-```
-
-## Enumerated values that changed
-
-The original `webkitAudioContext` API used C-style number based enumerated values in the API. Those values have since been changed to use the Web IDL based enumerated values, which should be familiar because they are similar to things like the {{domxref("HTMLInputElement")}} property {{domxref("HTMLInputElement.type", "type")}}.
-
-### OscillatorNode.type
-
-{{domxref("OscillatorNode")}}'s type property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const osc = context.createOscillator();
-osc.type = osc.SINE; // sine waveform
-osc.type = osc.SQUARE; // square waveform
-osc.type = osc.SAWTOOTH; // sawtooth waveform
-osc.type = osc.TRIANGLE; // triangle waveform
-osc.setWaveTable(table);
-const isCustom = osc.type === osc.CUSTOM; // isCustom will be true
-```
-
-```js
-// New standard AudioContext code:
-const osc = context.createOscillator();
-osc.type = "sine"; // sine waveform
-osc.type = "square"; // square waveform
-osc.type = "sawtooth"; // sawtooth waveform
-osc.type = "triangle"; // triangle waveform
-osc.setPeriodicWave(table); // Note: setWaveTable has been renamed to setPeriodicWave!
-const isCustom = osc.type === "custom"; // isCustom will be true
-```
-
-### BiquadFilterNode.type
-
-{{domxref("BiquadFilterNode")}}'s type property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const filter = context.createBiquadFilter();
-filter.type = filter.LOWPASS; // lowpass filter
-filter.type = filter.HIGHPASS; // highpass filter
-filter.type = filter.BANDPASS; // bandpass filter
-filter.type = filter.LOWSHELF; // lowshelf filter
-filter.type = filter.HIGHSHELF; // highshelf filter
-filter.type = filter.PEAKING; // peaking filter
-filter.type = filter.NOTCH; // notch filter
-filter.type = filter.ALLPASS; // allpass filter
-```
-
-```js
-// New standard AudioContext code:
-const filter = context.createBiquadFilter();
-filter.type = "lowpass"; // lowpass filter
-filter.type = "highpass"; // highpass filter
-filter.type = "bandpass"; // bandpass filter
-filter.type = "lowshelf"; // lowshelf filter
-filter.type = "highshelf"; // highshelf filter
-filter.type = "peaking"; // peaking filter
-filter.type = "notch"; // notch filter
-filter.type = "allpass"; // allpass filter
-```
-
-### PannerNode.panningModel
-
-{{domxref("PannerNode")}}'s panningModel property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const panner = context.createPanner();
-panner.panningModel = panner.EQUALPOWER; // equalpower panning
-panner.panningModel = panner.HRTF; // HRTF panning
-```
-
-```js
-// New standard AudioContext code:
-const panner = context.createPanner();
-panner.panningModel = "equalpower"; // equalpower panning
-panner.panningModel = "HRTF"; // HRTF panning
-```
-
-### PannerNode.distanceModel
-
-{{domxref("PannerNode")}}'s `distanceModel` property has been changed to use Web IDL enums. Old code using `webkitAudioContext` can be ported to standards based {{domxref("AudioContext")}} like below:
-
-```js
-// Old webkitAudioContext code:
-const panner = context.createPanner();
-panner.distanceModel = panner.LINEAR_DISTANCE; // linear distance model
-panner.distanceModel = panner.INVERSE_DISTANCE; // inverse distance model
-panner.distanceModel = panner.EXPONENTIAL_DISTANCE; // exponential distance model
-```
-
-```js
-// Mew standard AudioContext code:
-const panner = context.createPanner();
-panner.distanceModel = "linear"; // linear distance model
-panner.distanceModel = "inverse"; // inverse distance model
-panner.distanceModel = "exponential"; // exponential distance model
-```
-
-## Gain control moved to its own node type
-
-The Web Audio standard now controls all gain using the {{domxref("GainNode")}}. Instead of setting a `gain` property directly on an audio source, you connect the source to a gain node and then control the gain using that node's `gain` parameter.
-
-### AudioBufferSourceNode
-
-The `gain` attribute of {{domxref("AudioBufferSourceNode")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} to a gain node. See the following example:
-
-```js
-// Old webkitAudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-src.gain.value = 0.5;
-src.connect(context.destination);
-src.noteOn(0);
-```
-
-```js
-// New standard AudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-const gain = context.createGain();
-src.connect(gain);
-gain.gain.value = 0.5;
-gain.connect(context.destination);
-src.start(0);
-```
-
-### AudioBuffer
-
-The `gain` attribute of {{domxref("AudioBuffer")}} has been removed. The same functionality can be achieved by connecting the {{domxref("AudioBufferSourceNode")}} that owns the buffer to a gain node. See the following example:
-
-```js
-// Old webkitAudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-src.buffer.gain = 0.5;
-src.connect(context.destination);
-src.noteOn(0);
-```
-
-```js
-// New standard AudioContext code:
-const src = context.createBufferSource();
-src.buffer = someBuffer;
-const gain = context.createGain();
-src.connect(gain);
-gain.gain.value = 0.5;
-gain.connect(context.destination);
-src.start(0);
-```
-
-## Removal of AudioBufferSourceNode.looping
-
-The `looping` attribute of {{domxref("AudioBufferSourceNode")}} has been removed. This attribute was an alias of the `loop` attribute, so you can just use the `loop` attribute instead. Instead of having code like this:
-
-```js
-const source = context.createBufferSource();
-source.looping = true;
-```
-
-you can change it to respect the last version of the specification:
-
-```js
-const source = context.createBufferSource();
-source.loop = true;
-```
-
-Note, the `loopStart` and `loopEnd` attributes are not supported in `webkitAudioContext`.
-
-## Changes to determining playback state
-
-The `playbackState` attribute of {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}} has been removed. Depending on why you used this attribute, you can use the following techniques to get the same information:
-
-- If you need to compare this attribute to `UNSCHEDULED_STATE`, you can basically remember whether you've called `start()` on the node or not.
-- If you need to compare this attribute to `SCHEDULED_STATE`, you can basically remember whether you've called `start()` on the node or not. You can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to `start()` to know whether playback has started or not.
-- If you need to compare this attribute to `PLAYING_STATE`, you can compare the value of {{domxref("AudioContext.currentTime")}} to the first argument passed to `start()` to know whether playback has started or not.
-- If you need to know when playback of the node is finished (which is the most significant use case of `playbackState`), there is a new ended event which you can use to know when playback is finished. Please see this code example:
-
-```js
-// Old webkitAudioContext code:
-const src = context.createBufferSource();
-// Some time later...
-const isFinished = src.playbackState === src.FINISHED_STATE;
-```
-
-```js
-// New AudioContext code:
-let isFinished = false;
-const src = context.createBufferSource();
-src.onended = (event) => {
- isFinished = true;
-};
-```
-
-The exact same changes have been applied to both {{domxref("AudioBufferSourceNode")}} and {{domxref("OscillatorNode")}}, so you can apply the same techniques to both kinds of nodes.
-
-## Removal of AudioContext.activeSourceCount
-
-The `activeSourceCount` attribute has been removed from {{domxref("AudioContext")}}. If you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above.
-
-Code using the `activeSourceCount` attribute of the {{domxref("AudioContext")}}, like this snippet:
-
-```js
-const src0 = context.createBufferSource();
-const src1 = context.createBufferSource();
-// Set buffers and other parameters...
-src0.start(0);
-src1.start(0);
-// Some time later...
-console.log(context.activeSourceCount);
-```
-
-could be rewritten like that:
-
-```js
-// Array to track the playing source nodes:
-const sources = [];
-
-// When starting the source, put it at the end of the array,
-// and set a handler to make sure it gets removed when the
-// AudioBufferSourceNode reaches its end.
-// First argument is the AudioBufferSourceNode to start, other arguments are
-// the argument to the |start()| method of the AudioBufferSourceNode.
-function startSource(src, ...startArgs) {
- src.onended = () => {
- sources.splice(sources.indexOf(src), 1);
- };
- sources.push(src);
- src.start.apply(src, startArgs);
-}
-
-function activeSources() {
- return sources.length;
-}
-
-const src0 = context.createBufferSource();
-const src1 = context.createBufferSource();
-
-// Set buffers and other parameters...
-startSource(src0, 0);
-startSource(src1, 0);
-
-// Some time later, query the number of sources...
-console.log(activeSources());
-```
-
-## Renaming of WaveTable
-
-The {{domxref("WaveTable")}} interface has been renamed to {{domxref("PeriodicWave")}}. Here is how you can port old code using `WaveTable` to the standard AudioContext API:
-
-```js
-// Old webkitAudioContext code:
-const osc = context.createOscillator();
-const table = context.createWaveTable(realArray, imaginaryArray);
-osc.setWaveTable(table);
-```
-
-```js
-// New standard AudioContext code:
-const osc = context.createOscillator();
-const table = context.createPeriodicWave(realArray, imaginaryArray);
-osc.setPeriodicWave(table);
-```
-
-## Removal of some of the AudioParam read-only attributes
-
-The following read-only attributes have been removed from AudioParam: `name`, `units`, `minValue`, and `maxValue`. These used to be informational attributes. Here is some information on how you can get these values if you need them:
-
-- The `name` attribute is a string representing the name of the {{domxref("AudioParam")}} object. For example, the name of {{domxref("GainNode.gain")}} is `"gain"`. You can track where the {{domxref("AudioParam")}} object is coming from in your code if you need this information.
-- The `minValue` and `maxValue` attributes are read-only values representing the nominal range for the {{domxref("AudioParam")}}. For example, for {{domxref("GainNode") }}, these values are 0 and 1, respectively. Note that these bounds are not enforced by the engine, and are merely used for informational purposes. As an example, it's perfectly valid to set a gain value to 2, or even -1. In order to find out these nominal values, you can consult the [specification](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html).
-- The `units` attribute as implemented in `webkitAudioContext` implementations is unused, and always returns 0. There is no reason why you should need this attribute.
-
-## Removal of MediaElementAudioSourceNode.mediaElement
-
-The `mediaElement` attribute of {{domxref("MediaElementAudioSourceNode")}} has been removed. You can keep a reference to the media element used to create this node if you need to access it later.
-
-## Removal of MediaStreamAudioSourceNode.mediaStream
-
-The `mediaStream` attribute of {{domxref("MediaStreamAudioSourceNode")}} has been removed. You can keep a reference to the media stream used to create this node if you need to access it later.
diff --git a/files/en-us/web/api/web_audio_api/simple_synth/index.md b/files/en-us/web/api/web_audio_api/simple_synth/index.md
index 86fe651ee472ea0..af964e70d2c19ae 100644
--- a/files/en-us/web/api/web_audio_api/simple_synth/index.md
+++ b/files/en-us/web/api/web_audio_api/simple_synth/index.md
@@ -96,7 +96,11 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
.key {
cursor: pointer;
- font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+ font:
+ 16px "Open Sans",
+ "Lucida Grande",
+ "Arial",
+ sans-serif;
border: 1px solid black;
border-radius: 5px;
width: 20px;
@@ -129,7 +133,8 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
background-color: #eef;
}
-.key:active {
+.key:active,
+.active {
background-color: #000;
color: #fff;
}
@@ -141,7 +146,11 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
.settingsBar {
padding-top: 8px;
- font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+ font:
+ 14px "Open Sans",
+ "Lucida Grande",
+ "Arial",
+ sans-serif;
position: relative;
vertical-align: middle;
width: 100%;
@@ -396,9 +405,9 @@ if (!Object.entries) {
(e, k) =>
concat(
e,
- typeof k === "string" && isEnumerable(O, k) ? [[k, O[k]]] : []
+ typeof k === "string" && isEnumerable(O, k) ? [[k, O[k]]] : [],
),
- []
+ [],
);
};
}
@@ -531,7 +540,7 @@ function notePressed(event) {
if (event.buttons & 1) {
const dataset = event.target.dataset;
- if (!dataset["pressed"]) {
+ if (!dataset["pressed"] && dataset["octave"]) {
const octave = Number(dataset["octave"]);
oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
dataset["pressed"] = "yes";
@@ -554,9 +563,12 @@ function noteReleased(event) {
if (dataset && dataset["pressed"]) {
const octave = Number(dataset["octave"]);
- oscList[octave][dataset["note"]].stop();
- delete oscList[octave][dataset["note"]];
- delete dataset["pressed"];
+
+ if (oscList[octave] && oscList[octave][dataset["note"]]) {
+ oscList[octave][dataset["note"]].stop();
+ delete oscList[octave][dataset["note"]];
+ delete dataset["pressed"];
+ }
}
}
```
@@ -575,6 +587,39 @@ function changeVolume(event) {
This sets the value of the main gain node's `gain` {{domxref("AudioParam")}} to the slider's new value.
+#### Keyboard support
+
+The code below adds [`keydown`](/en-US/docs/Web/API/Element/keydown_event) and [`keyup`](/en-US/docs/Web/API/Element/keyup_event) event listeners to handle keyboard input. The `keydown` event handler calls `notePressed()` to start playing the note corresponding to the key that was pressed, and the `keyup` event handler calls `noteReleased()` to stop playing the note corresponding to the key that was released.
+
+```js-nolint
+const synthKeys = document.querySelectorAll(".key");
+const keyCodes = [
+ "Space",
+ "ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight",
+ "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter",
+ "Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight",
+ "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace",
+ "Escape",
+];
+function keyNote(event) {
+ const elKey = synthKeys[keyCodes.indexOf(event.code)];
+ if (elKey) {
+ if (event.type === "keydown") {
+ elKey.tabIndex = -1;
+ elKey.focus();
+ elKey.classList.add("active");
+ notePressed({ buttons: 1, target: elKey });
+ } else {
+ elKey.classList.remove("active");
+ noteReleased({ buttons: 1, target: elKey });
+ }
+ event.preventDefault();
+ }
+}
+addEventListener("keydown", keyNote);
+addEventListener("keyup", keyNote);
+```
+
### Result
Put all together, the result is a simple but working point-and-click musical keyboard:
diff --git a/files/en-us/web/api/web_audio_api/tools/index.md b/files/en-us/web/api/web_audio_api/tools/index.md
index 2ee84090ab158c5..a430a0b0137b6ed 100644
--- a/files/en-us/web/api/web_audio_api/tools/index.md
+++ b/files/en-us/web/api/web_audio_api/tools/index.md
@@ -28,4 +28,3 @@ _Add information for developers working in Safari._
- [Web Audio API](/en-US/docs/Web/API/Web_Audio_API)
- [Using the Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
-- [Writing Web Audio API code that works in every browser](/en-US/docs/Web/Guide/Audio_and_video_delivery/Web_Audio_API_cross_browser)
diff --git a/files/en-us/web/api/web_audio_api/using_audioworklet/index.md b/files/en-us/web/api/web_audio_api/using_audioworklet/index.md
index c5974d8d6977d94..310b91c0788f9d3 100644
--- a/files/en-us/web/api/web_audio_api/using_audioworklet/index.md
+++ b/files/en-us/web/api/web_audio_api/using_audioworklet/index.md
@@ -28,7 +28,7 @@ Throughout the remainder of this article, we'll look at these steps in more deta
The example code found on this page is derived from [this working example](https://mdn.github.io/webaudio-examples/audioworklet/) which is part of MDN's [GitHub repository of Web Audio examples](https://github.com/mdn/webaudio-examples/). The example creates an oscillator node and adds white noise to it using an {{domxref("AudioWorkletNode")}} before playing the resulting sound out. Slider controls are available to allow controlling the gain of both the oscillator and the audio worklet's output.
-[**See the code**](https://github.com/mdn/webaudio-examples/tree/master/audioworklet)
+[**See the code**](https://github.com/mdn/webaudio-examples/tree/main/audioworklet)
[**Try it live**](https://mdn.github.io/webaudio-examples/audioworklet/)
@@ -94,7 +94,7 @@ const firstChannelByteCount = firstInputFirstChannel.length;
const firstByteOfFirstChannel = firstInputFirstChannel[0]; // (or inputList[0][0][0])
```
-The output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is an array of `Float32Array` objects, which contain the samples for that channel.
+The output list is structured in exactly the same way; it's an array of outputs, each of which is an array of channels, each of which is a `Float32Array` object, which contains the samples for that channel.
How you use the inputs and how you generate the outputs depends very much on your processor. If your processor is just a generator, it can ignore the inputs and just replace the contents of the outputs with the generated data. Or you can process each input independently, applying an algorithm to the incoming data on each channel of each input and writing the results into the corresponding outputs' channels (keeping in mind that the number of inputs and outputs may differ, and the channel counts on those inputs and outputs may also differ). Or you can take all the inputs and perform mixing or other computations that result in a single output being filled with data (or all the outputs being filled with the same data).
@@ -178,7 +178,7 @@ To create an audio node that pumps blocks of audio data through an {{domxref("Au
1. Load and install the audio processor module
2. Create an {{domxref("AudioWorkletNode")}}, specifying the audio processor module to use by its name
-3. Connect inputs to the `AudioWorkletNode` and its outputs to appropriate destinations (either other nodes or to the {{domxref("AudioContext")}} object's {{domxref("AudioContext.destination", "destination")}} property.
+3. Connect inputs to the `AudioWorkletNode` and its outputs to appropriate destinations (either other nodes or to the {{domxref("AudioContext")}} object's {{domxref("BaseAudioContext/destination", "destination")}} property.
To use an audio worklet processor, you can use code similar to the following:
@@ -207,7 +207,7 @@ In order to ensure the context is usable, this starts by creating the context if
You can then create a new audio processor node by doing this:
```js
-let newProcessorNode = createMyAudioProcessor();
+let newProcessorNode = await createMyAudioProcessor();
```
If the returned value, `newProcessorNode`, is non-`null`, we have a valid audio context with its hiss processor node in place and ready to use.
@@ -256,9 +256,9 @@ process(inputList, outputList, parameters) {
const output = outputList[0];
const gain = parameters.gain;
- for (let channelNum = 0; channelNum < input.length; channel++) {
- const inputChannel = input[channel];
- const outputChannel = output[channel];
+ for (let channelNum = 0; channelNum < input.length; channelNum++) {
+ const inputChannel = input[channelNum];
+ const outputChannel = output[channelNum];
// If gain.length is 1, it's a k-rate parameter, so apply
// the first entry to every frame. Otherwise, apply each
diff --git a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
index 62b7ce131c2c6ab..dc18787febe524c 100644
--- a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
+++ b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
@@ -14,7 +14,7 @@ Our simple example for this guide provides a play/pause button that starts and p
![A demo featuring a play button, and toggle to turn a filter on and off, and a line graph showing the filter frequencies returned after the filter has been applied.](iir-filter-demo.png)
-You can check out the [full demo here on Codepen](https://codepen.io/Rumyra/pen/oPxvYB/). Also see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/master/iirfilter-node). It includes some different coefficient values for different lowpass frequencies — you can change the value of the `filterNumber` constant to a value between 0 and 3 to check out the different available effects.
+You can check out the [full demo here on Codepen](https://codepen.io/Rumyra/pen/oPxvYB/). Also see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/main/iirfilter-node). It includes some different coefficient values for different lowpass frequencies — you can change the value of the `filterNumber` constant to a value between 0 and 3 to check out the different available effects.
## Browser support
@@ -32,7 +32,7 @@ When you are using an {{domxref("IIRFilterNode")}} instead of a {{domxref("Biqua
With the IIRFIlter node it's up to you to set what `feedforward` and `feedback` values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths.
-If you are looking to learn more there's some [information about the maths behind IIR filters here](http://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf). This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.
+If you are looking to learn more there's some [information about the maths behind IIR filters here](https://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf). This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.
If you want to play with the IIR filter node and need some values to help along the way, there's [a table of already calculated values here](https://www.dspguide.com/CH20.PDF); on pages 4 & 5 of the linked PDF the `an` values refer to the `feedForward` values and the `bn` values refer to the `feedback`. [musicdsp.org](https://www.musicdsp.org/en/latest/) is also a great resource if you want to read more about different filters and how they are implemented digitally.
@@ -101,7 +101,7 @@ playButton.addEventListener(
// …
}
},
- false
+ false,
);
```
@@ -129,7 +129,7 @@ filterButton.addEventListener(
// …
}
},
- false
+ false,
);
```
@@ -163,7 +163,7 @@ Now let's get our response data:
iirFilter.getFrequencyResponse(
myFrequencyArray,
magResponseOutput,
- phaseResponseOutput
+ phaseResponseOutput,
);
```
@@ -218,7 +218,7 @@ magResponseOutput.forEach((magResponseData, i) => {
} else {
canvasCtx.lineTo(
(width / totalArrayItems) * i,
- height - magResponseData * 100 - spacing
+ height - magResponseData * 100 - spacing,
);
}
});
diff --git a/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
index 28147894df0fc28..9d0628a6266b481 100644
--- a/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
@@ -20,7 +20,7 @@ Our boombox looks like this:
Note the retro cassette deck with a play button, and vol and pan sliders to allow you to alter the volume and stereo panning. We could make this a lot more complex, but this is ideal for simple learning at this stage.
-[Check out the final demo here on Codepen](https://codepen.io/Rumyra/pen/qyMzqN/), or see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/master/audio-basics).
+[Check out the final demo here on Codepen](https://codepen.io/Rumyra/pen/qyMzqN/), or see the [source code on GitHub](https://github.com/mdn/webaudio-examples/tree/main/audio-basics).
## Browser support
@@ -122,7 +122,7 @@ playButton.addEventListener(
playButton.dataset.playing = "false";
}
},
- false
+ false,
);
```
@@ -134,7 +134,7 @@ audioElement.addEventListener(
() => {
playButton.dataset.playing = "false";
},
- false
+ false,
);
```
@@ -178,7 +178,7 @@ volumeControl.addEventListener(
() => {
gainNode.gain.value = volumeControl.value;
},
- false
+ false,
);
```
@@ -225,7 +225,7 @@ pannerControl.addEventListener(
() => {
panner.pan.value = pannerControl.value;
},
- false
+ false,
);
```
@@ -251,7 +251,7 @@ The [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/vo
![A UI with a sound wave being shown, and options for choosing voice effects and visualizations.](voice-change-o-matic.png)
-Another application developed specifically to demonstrate the Web Audio API is the [Violent Theremin](https://mdn.github.io/webaudio-examples/violent-theremin/), a simple web application that allows you to change pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow ([see Violent Theremin source code](https://github.com/mdn/webaudio-examples/tree/master/violent-theremin)).
+Another application developed specifically to demonstrate the Web Audio API is the [Violent Theremin](https://mdn.github.io/webaudio-examples/violent-theremin/), a simple web application that allows you to change pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow ([see Violent Theremin source code](https://github.com/mdn/webaudio-examples/tree/main/violent-theremin)).
![A page full of rainbow colors, with two buttons labeled Clear screen and mute.](violent-theremin.png)
diff --git a/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index e5733cb8e36e9c5..3c83b150c58affd 100644
--- a/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -188,14 +188,13 @@ As before, we now start a for loop and cycle through each value in the `dataArra
The one value that needs explaining is the vertical offset position we are drawing each bar at: `HEIGHT - barHeight / 2`. I am doing this because I want each bar to stick up from the bottom of the canvas, not down from the top, as it would if we set the vertical position to 0. Therefore, we instead set the vertical position each time to the height of the canvas minus `barHeight / 2`, so therefore each bar will be drawn from partway down the canvas, down to the bottom.
```js
- for (let i = 0; i < bufferLength; i++) {
- barHeight = dataArray[i] / 2;
+for (let i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i] / 2;
- canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
- canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight);
+ canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+ canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight);
- x += barWidth + 1;
- }
+ x += barWidth + 1;
}
```
diff --git a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index 7e5241d17c7a295..2e4ffaef03f8eaf 100644
--- a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -21,12 +21,12 @@ It's worth noting that you don't _have_ to move sound within a full 3D space eit
> **Note:** There's also a {{domxref("StereoPannerNode")}} designed to deal with the common use case of creating simple left and right stereo panning effects.
> This is much simpler to use, but obviously nowhere near as versatile.
-> If you just want a simple stereo panning effect, our [StereoPannerNode example](https://mdn.github.io/webaudio-examples/stereo-panner-node/) ([see source code](https://github.com/mdn/webaudio-examples/tree/master/stereo-panner-node)) should give you everything you need.
+> If you just want a simple stereo panning effect, our [StereoPannerNode example](https://mdn.github.io/webaudio-examples/stereo-panner-node/) ([see source code](https://github.com/mdn/webaudio-examples/tree/main/stereo-panner-node)) should give you everything you need.
## 3D boombox demo
To demonstrate 3D spatialization we've created a modified version of the boombox demo we created in our basic [Using the Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) guide.
-See the [3D spatialization demo live](https://mdn.github.io/webaudio-examples/spatialization/) (and see the [source code](https://github.com/mdn/webaudio-examples/tree/master/spatialization) also).
+See the [3D spatialization demo live](https://mdn.github.io/webaudio-examples/spatialization/) (and see the [source code](https://github.com/mdn/webaudio-examples/tree/main/spatialization) also).
![A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it.](web-audio-spatialization.png)
@@ -176,7 +176,7 @@ We can move it left and right, up and down, and back and forth; we can also rota
The sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us.
We need to set up a few things for the interface.
-First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up [CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms) to actually do the movement.
+First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) to actually do the movement.
Finally, we'll set some bounds so our boombox doesn't move too far in any direction:
```js
@@ -463,7 +463,7 @@ moveControls.forEach((el) => {
}
moving = moveBoombox(direction);
},
- false
+ false,
);
window.addEventListener(
@@ -473,7 +473,7 @@ moveControls.forEach((el) => {
cancelAnimationFrame(moving.frameId);
}
},
- false
+ false,
);
});
```
@@ -529,7 +529,7 @@ playButton.addEventListener(
playButton.dataset.playing = "false";
}
},
- false
+ false,
);
```
@@ -544,7 +544,7 @@ The values can be hard to manipulate sometimes and depending on your use case it
> The panner node does some very involved maths under the hood;
> there are a [number of tests here](https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&aligned=true) so you can keep track of the status of the inner workings of this node across different platforms.
-Again, you can [check out the final demo here](https://mdn.github.io/webaudio-examples/spatialization/), and the [final source code is here](https://github.com/mdn/webaudio-examples/tree/master/spatialization).
+Again, you can [check out the final demo here](https://mdn.github.io/webaudio-examples/spatialization/), and the [final source code is here](https://github.com/mdn/webaudio-examples/tree/main/spatialization).
There is also a [Codepen demo too](https://codepen.io/Rumyra/pen/MqayoK?editors=0100).
If you are working with 3D games and/or WebXR it's a good idea to harness a 3D library to create such functionality, rather than trying to do this all yourself from first principles.
diff --git a/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md b/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md
index a191f06c8525b13..afac10ea54902f7 100644
--- a/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md
+++ b/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md
@@ -4,7 +4,7 @@ slug: Web/API/Web_Authentication_API/Attestation_and_Assertion
page-type: guide
---
-{{SeeCompatTable}}{{DefaultAPISidebar("Web Authentication API")}}
+{{DefaultAPISidebar("Web Authentication API")}}
There are two different types of certificates used in WebAuthn for registration and authentication. They have similar names and similar purposes, but understanding the differences may be an initial point of confusion. The sections below describe attestation, which happens during registration, and assertion which happens during authentication.
@@ -12,19 +12,21 @@ There are two different types of certificates used in WebAuthn for registration
When an authenticator registers a new key pair with a service, the authenticator signs the public key with an attestation certificate. The attestation certificate is built into the authenticator during manufacturing time and is specific to a device model. That is, all "Samsung Galaxy S8" phones, manufactured at a specific time or particular manufacturing run, have the same attestation certificate.
-The attestation is returned through the WebAuthn API as the [AuthenticatorAttestationResponse](/en-US/docs/Web/API/AuthenticatorAttestationResponse). The attestation format contains two basic ArrayBuffers:
+The attestation is returned through the WebAuthn API as the [AuthenticatorAttestationResponse](/en-US/docs/Web/API/AuthenticatorAttestationResponse). The attestation format contains two basic {{jsxref("ArrayBuffer")}} objects:
- **clientDataJSON** - An ArrayBuffer that contains a JSON representation of what the browser saw when being asked to authenticate.
-- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated keypair was created by that authenticator. Contains authenticator data and an attestation statement. The authenticator data contains an attestedCredentialData field. The attestedCredentialData field contains the credentialId and credentialPublicKey. (The [authenticator data](/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData) is the same structure that is used in the AuthenticatorAssertionResponse. The attestedCredentialData is an optional field used in attestation. It is not included when used in the AuthenticatorAssertionResponse.)
+- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated keypair was created by that authenticator. This contains:
+ - [Authenticator data](/en-US/docs/Web/API/Web_Authentication_API/Authenticator_data) containing an `attestedCredentialData` field, which in turn contains the `credentialId` and `credentialPublicKey`. The `attestedCredentialData` is an optional field used in attestation. It is not included when used in the AuthenticatorAssertionResponse.
+ - An attestation statement, which is optionally present depending on whether the relying party requests attestation. In general, relying parties aren't encouraged to request attestation, so it's more likely that this statement won't be present.
Different devices have different attestation formats. The [pre-defined attestation formats in WebAuthn](https://www.w3.org/TR/webauthn/#defined-attestation-formats) are:
- **Packed** - a generic attestation format that is commonly used by devices whose sole function is as a WebAuthn authenticator, such as security keys.
- **TPM** - the Trusted Platform Module (TPM) is a set of specifications from the Trusted Platform Group (TPG). This attestation format is commonly found in desktop computers and is used by Windows Hello as its preferred attestation format.
- **Android Key Attestation** - one of the features added in Android O was Android Key Attestation, which enables the Android operating system to attest to keys.
-- **Android SafetyNet** -prior to Android Key Attestation, the only option for Android devices was to create Android SafetyNet attestations
-- **FIDO U2F** - security keys that implement the FIDO U2F standard use this format
-- **none** - browsers may prompt users whether they want a site to be allowed to see their attestation data and/or may remove attestation data from the authenticator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none`
+- **Android SafetyNet** -prior to Android Key Attestation, the only option for Android devices was to create Android SafetyNet attestations.
+- **FIDO U2F** - security keys that implement the FIDO U2F standard use this format.
+- **none** - browsers may prompt users whether they want a site to be allowed to see their attestation data and/or may remove attestation data from the authenticator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none`.
The purpose of attestation is to cryptographically prove that a newly generated key pair came from a specific device. This provides a root of trust for a newly generated key pair as well as being able to identify the attributes of a device being used (how the private key is protected; if / what kind of biometric is being used; whether a device has been certified; etc.). It should be noted that while attestation provides the capability for a root of trust, validating the root of trust is frequently not necessary. When registering an authenticator for a new account, typically a Trust On First Use (TOFU) model applies; and when adding an authenticator to an existing account, a user has already been authenticated and has established a secure session.
@@ -35,7 +37,7 @@ When a user chooses to log into a service, the server sends a challenge and the
The assertion is returned through the WebAuthn API as the [AuthenticatorAssertionResponse](/en-US/docs/Web/API/AuthenticatorAssertionResponse). The assertion format is fairly simple as it contains four basic ArrayBuffers:
- [clientDataJSON](/en-US/docs/Web/API/AuthenticatorResponse/clientDataJSON) - The same as in attestation. An ArrayBuffer that contains a JSON representation of what the browser saw when being asked to authenticate.
-- [authenticatorData](/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData) - data created and/or used by the authenticator
+- [authenticatorData](/en-US/docs/Web/API/AuthenticatorAssertionResponse/authenticatorData) - data created and/or used by the authenticator (see also [authenticator data](/en-US/docs/Web/API/Web_Authentication_API/Authenticator_data)).
- **signature** - a signature over the clientDataJSON and authenticatorData that can be verified with the public key that was created during registration.
- **userHandle** - Optional. (Nullable) A user identifier. This may be a username, or a hash of a username, etc. Used by a service to give a scope to credentials. Maximum length of 64 bytes. Older authenticators (U2F) do not support this output.
diff --git a/files/en-us/web/api/web_authentication_api/authenticator_data/index.md b/files/en-us/web/api/web_authentication_api/authenticator_data/index.md
new file mode 100644
index 000000000000000..6372de3a466ab74
--- /dev/null
+++ b/files/en-us/web/api/web_authentication_api/authenticator_data/index.md
@@ -0,0 +1,57 @@
+---
+title: Authenticator data
+slug: Web/API/Web_Authentication_API/Authenticator_data
+page-type: guide
+---
+
+{{DefaultAPISidebar("Web Authentication API")}}
+
+The authenticator data structure contains information from the authenticator about the processing of a credential creation or authentication request — such as the Relying Party ID Hash (`rpIdHash`), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator. This page explains what is contained in the data structure.
+
+## Accessing authenticator data
+
+Authenticator data is made available to the browser as an {{jsxref("ArrayBuffer")}}, and can be accessed in multiple ways. The two most convenient are:
+
+- In the {{domxref("AuthenticatorAssertionResponse.authenticatorData", "PublicKeyCredential.response.authenticatorData")}} property made available on the {{domxref("PublicKeyCredential")}} returned from a successful {{domxref("CredentialsContainer.create", "navigator.credentials.create()")}} (credential creation) call.
+- Via the {{domxref("AuthenticatorAttestationResponse.getAuthenticatorData", "PublicKeyCredential.response.getAuthenticatorData()")}} method made available on the {{domxref("PublicKeyCredential")}} returned from a successful {{domxref("CredentialsContainer.get", "navigator.credentials.get()")}} (authentication) call.
+
+## Data structure
+
+An authenticator data {{jsxref("ArrayBuffer")}} is at least 37 bytes in length, and contains the following fields:
+
+- **rpIdHash** (32 bytes)
+ - : The SHA-256 hash of the [Relying Party ID](https://w3c.github.io/webauthn/#relying-party-identifier) that the credential is scoped to. The server will ensure that this hash matches the SHA256 hash of its own relying party ID in order to prevent phishing or other man-in-the-middle attacks.
+- **flags** (1 bytes)
+
+ - : A bitfield that indicates various attributes that were asserted by the authenticator. The bits are as follows, where Bit 0 is the least significant bit and all bits not specifically mentioned below are "reserved for future use":
+
+ - Bit 0, User Presence (UP): If set (i.e., to `1`), the authenticator validated that the user was present through some Test of User Presence (TUP), such as touching a button on the authenticator.
+ - Bit 2, User Verification (UV): If set, the authenticator verified the actual user through a biometric, PIN, or other method.
+ - Bit 3, Backup Eligibility (BE): If set, the public key credential source used by the authenticator to generate an assertion is backup-eligible. This means that it can be backed up in some fashion (for example via cloud or local network sync) and as such may become present on an authenticator other than its generating authenticator. Backup-eligible credential sources are therefore also known as multi-device credentials.
+ - Bit 4, Backup State (BS): If set, the public key credential source is currently backed up (see Bit 3 for context).
+ - Bit 6, Attested Credential Data (AT): If set, the attested credential data will immediately follow the first 37 bytes of this `authenticatorData`.
+ - Bit 7, Extension Data (ED): If set, extension data is present. Extension data will follow attested credential data if it is present, or will immediately follow the first 37 bytes of the `authenticatorData` if no attested credential data is present.
+
+- **signCount** (4 bytes)
+ - : A signature counter, if supported by the authenticator (set to 0 otherwise). Servers may optionally use this counter to detect authenticator cloning.
+- **attestedCredentialData** (variable length)
+
+ - : The credential that was created. This is only present during a {{domxref("CredentialsContainer.create", "navigator.credentials.create()")}} call. This is a sequence of bytes with the following format:
+
+ - **AAGUID** (16 bytes): The Authenticator Attestation Globally Unique Identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator). A relying party can use this to find out the characteristics of the authenticator by looking up its metadata statement via the [FIDO metadata service](https://fidoalliance.org/metadata/). This is relevant in certain situations such as enterprise deployments or where regulatory requirements dictate a certain type of authenticator be used; it should be ignored otherwise.
+
+ - **_credentialIdLength_** (2 bytes): The length of the credential ID that immediately follows these bytes.
+ - **_credentialId_** (variable length): A unique identifier for this credential so that it can be requested for future authentications. The credential is "_credentialIdLength_" bytes long.
+ - **credentialPublicKey** (variable length): A [COSE](https://datatracker.ietf.org/doc/html/rfc8152)-encoded public key. This public key will be stored on the server associated with a user's account and be used for future authentications. Relying parties can retrieve the DER-encoded form of it without parsing the COSE-encoded authenticator data via the {{domxref("AuthenticatorAttestationResponse.getPublicKey()")}} method.
+
+- **extensions** (variable length)
+
+ - : An optional [CBOR](https://datatracker.ietf.org/doc/html/rfc7049) map containing the response outputs from extensions processed by the authenticator
+
+ Extensions are optional and different browsers may recognize different extensions. Processing extensions is always optional for the browser: if a browser does not recognize a given extension, it will just ignore it. For information on using extensions, and which ones are supported by which browsers, see [Web Authentication extensions](/en-US/docs/Web/API/Web_Authentication_API/WebAuthn_extensions).
+
+ > **Note:** The authenticator data only contains the results from extensions processed by the authenticator. The results from extensions processed by the browser (client) can be accessed via {{domxref("PublicKeyCredential.getClientExtensionResults")}}.
+
+## See also
+
+[Authenticator data definition in the WebAuthn specification](https://w3c.github.io/webauthn/#sctn-authenticator-data)
diff --git a/files/en-us/web/api/web_authentication_api/index.md b/files/en-us/web/api/web_authentication_api/index.md
index c8090cf7a4fc46d..f8af14503ec12ea 100644
--- a/files/en-us/web/api/web_authentication_api/index.md
+++ b/files/en-us/web/api/web_authentication_api/index.md
@@ -2,112 +2,179 @@
title: Web Authentication API
slug: Web/API/Web_Authentication_API
page-type: web-api-overview
-browser-compat:
- - api.Credential
- - api.CredentialsContainer
- - api.PublicKeyCredential
- - api.AuthenticatorResponse
- - api.AuthenticatorAttestationResponse
- - api.AuthenticatorAssertionResponse
+browser-compat: api.PublicKeyCredential
---
{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}
-The Web Authentication API is an extension of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API) that enables strong authentication with public key cryptography, enabling passwordless authentication and/or secure second-factor authentication without SMS texts.
+The Web Authentication API (WebAuthn) is an extension of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API) that enables strong authentication with public key cryptography, enabling passwordless authentication and secure multi-factor authentication (MFA) without SMS texts.
-## Web authentication concepts and usage
+> **Note:** [Passkeys](https://passkeys.dev/) are a significant use case for web authentication; see [Create a passkey for passwordless logins](https://web.dev/articles/passkey-registration) and [Sign in with a passkey through form autofill](https://web.dev/articles/passkey-form-autofill) for implementation details. See also [Google Identity > Passwordless login with passkeys](https://developers.google.com/identity/passkeys).
-The Web Authentication API (also referred to as WebAuthn) uses [asymmetric (public-key)](https://en.wikipedia.org/wiki/Public-key_cryptography) instead of passwords or SMS texts for registering, authenticating, and [second-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) with websites. This has some benefits:
+## WebAuthn concepts and usage
+
+WebAuthn uses [asymmetric (public-key) cryptography](https://en.wikipedia.org/wiki/Public-key_cryptography) instead of passwords or SMS texts for registering, authenticating, and [multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) with websites. This has some benefits:
- **Protection against phishing:** An attacker who creates a fake login website can't login as the user because the signature changes with the [origin](/en-US/docs/Glossary/Origin) of the website.
- **Reduced impact of data breaches:** Developers don't need to hash the public key, and if an attacker gets access to the public key used to verify the authentication, it can't authenticate because it needs the private key.
- **Invulnerable to password attacks:** Some users might reuse passwords, and an attacker may obtain the user's password for another website (e.g. via a data breach). Also, text passwords are much easier to brute-force than a digital signature.
-Many websites already have pages that allow users to register new accounts or sign in to an existing account, and the Web Authentication API acts as a replacement or supplement to those on those existing webpages. Similar to the other forms of the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API), the Web Authentication API has two basic methods that correspond to register and login:
+Many websites already have pages that allow users to register new accounts or sign into an existing account, and WebAuthn acts as a replacement or enhancement for the authentication part of the system. It extends the [Credential Management API](/en-US/docs/Web/API/Credential_Management_API), abstracting communication between the user agent and an authenticator and providing the following new functionality:
+
+- When {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} is used with the `publicKey` option, the user agent creates new credentials via an authenticator — either for registering a new account or for associating a new asymmetric key pair with an existing account.
+ - When registering a new account, these credentials are stored on a server (also referred to as a service or a [relying party](https://en.wikipedia.org/wiki/Relying_party)) and can be subsequently used to log a user in.
+ - The asymmetric key pair is stored in the authenticator, which can then be used to authenticate a user with a relying party for example during MFA. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
+- When {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} is used with the `publicKey` option, the user agent uses an existing set of credentials to authenticate to a relying party (either as the primary login or to provide an additional factor during MFA as described above).
+
+In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and return the challenge signed by the private key back to the server. This proves to the server that a user has the private key required for authentication without revealing any secrets over the network.
+
+> **Note:** The "challenge" must be a buffer of random information at least 16 bytes in size.
+
+### Creating a key pair and registering a user
-- {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - when used with the publicKey option, creates new credentials, either for registering a new account or for associating a new asymmetric key pair credentials with an existing account.
-- {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - when used with the publicKey option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a form of second-factor authentication.
+To illustrate how the credential creation process works, let's describe the typical flow that occurs when a user wants to register a credential to a relying party:
-> **Note:** Both `create()` and `get()` require a [secure context](/en-US/docs/Web/Security/Secure_Contexts) (i.e. the server is connected by HTTPS or is the localhost), and will not be available for use if the browser is not operating in a secure context.
+1. The relying party server sends user and relying party information to the web app handling the registration process, along with the "challenge", using an appropriate secure mechanism (for example [Fetch](/en-US/docs/Web/API/Fetch_API) or [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest)).
-In their most basic forms, both `create()` and `get()` receive a very large random number called the "challenge" from the server and they return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.
+ > **Note:** The format for sharing information between the relying party server and the web app is up to the application.
+ > A recommended approach is to exchange {{glossary("JSON type representation")}} objects for credentials and credential options.
+ > Convenience methods have been created in `PublicKeyCredential` for converting from the JSON representations to the form required by the authentication APIs: {{domxref("PublicKeyCredential.parseCreationOptionsFromJSON_static", "parseCreationOptionsFromJSON()")}}, {{domxref("PublicKeyCredential.parseRequestOptionsFromJSON_static", "parseRequestOptionsFromJSON()")}} and {{domxref("PublicKeyCredential.toJSON()")}}.
-In order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser:
+2. The web app initiates generation of a new credential via the authenticator, on behalf of the relying party, via a {{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} call. This call is passed a `publicKey` option specifying device capabilities, e.g., whether the device provides its own user authentication (for example with biometrics).
-1. **Server** - the Web Authentication API is intended to register new credentials on a server (also referred to as a service or a [relying party](https://en.wikipedia.org/wiki/Relying_party)) and later use those same credentials on that same server to authenticate a user.
-2. **Authenticator** - the credentials are created and stored in a device called an authenticator. This is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator. The authenticator may be embedded into the user agent, into an operating system, such as Windows Hello, or it may be a physical token, such as a USB or Bluetooth Security Key.
+ A typical `create()` call might look like so:
-### Registration
+ ```js
+ let credential = await navigator.credentials.create({
+ publicKey: {
+ challenge: new Uint8Array([117, 61, 252, 231, 191, 241, ...]),
+ rp: { id: "acme.com", name: "ACME Corporation" },
+ user: {
+ id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
+ name: "jamiedoe",
+ displayName: "Jamie Doe"
+ },
+ pubKeyCredParams: [ {type: "public-key", alg: -7} ]
+ }
+ });
+ ```
-A typical registration process has six steps, as illustrated in Figure 1 and described further below. This is a simplification of the data required for the registration process that is only intended to provide an overview. The full set of required fields, optional fields, and their meanings for creating a registration request can be found in the {{domxref("PublicKeyCredentialCreationOptions")}} dictionary. Likewise, the full set of response fields can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAttestationResponse")}} interface). Note most JavaScript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.
+ The parameters of the `create()` call are passed to the authenticator, along with a SHA-256 hash that is signed to ensure that it isn't tampered with.
-![Web Authentication API registration component and dataflow diagram](webauthn_registration_r4.png)
+3. After the authenticator obtains user consent, it generates a key pair and returns the public key and optional signed attestation to the web app. This is provided when the {{jsxref("Promise")}} returned by the `create()` call fulfills, in the form of a {{domxref("PublicKeyCredential")}} object instance (the {{domxref("PublicKeyCredential.response")}} property contains the attestation information).
-_Figure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action._
+4. The web app forwards the {{domxref("PublicKeyCredential")}} to the server, again using an appropriate mechanism.
-First (labeled step 0 in the diagram), the application makes the initial registration request. The protocol and format of this request are outside the scope of the Web Authentication API.
+5. The server stores the public key, coupled with the user identity, to remember the credential for future authentications. During this process, it performs a series of checks to ensure that the registration was complete and not tampered with. These include:
-After this, the registration steps are:
+ 1. Verifying that the challenge is the same as the challenge that was sent.
+ 2. Ensuring that the origin was the origin expected.
+ 3. Validating that the signature and attestation are using the correct certificate chain for the specific model of the authenticator used to generated the key par in the first place.
-1. **Server Sends Challenge, User Info, and Relying Party Info** - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be [REST](/en-US/docs/Glossary/REST) over https (probably using [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest) or [Fetch](/en-US/docs/Web/API/Fetch_API)), but they could also be [SOAP](/en-US/docs/Glossary/SOAP), [RFC 2549](https://datatracker.ietf.org/doc/html/rfc2549) or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the [create()](/en-US/docs/Web/API/CredentialsContainer/create) call, typically with little or no modification and returns a [Promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. **Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.**
-2. **Browser Calls authenticatorMakeCredential() on Authenticator** - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
-3. **Authenticator Creates New Key Pair and Attestation** - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.
-4. **Authenticator Returns Data to Browser** - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.
-5. **Browser Creates Final Data, Application sends response to Server** - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be base64 encoded or similar).
-6. **Server Validates and Finalizes Registration** - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include:
+> **Warning:** Attestation provides a way for a relying party to determine the provenance of an authenticator. Relying parties should not attempt to maintain allowlists of authenticators.
- 1. Verifying that the challenge is the same as the challenge that was sent
- 2. Ensuring that the origin was the origin expected
- 3. Validating that the signature over the clientDataHash and the attestation using the certificate chain for that specific model of the authenticator
+### Authenticating a user
- A complete list of validation steps [can be found in the Web Authentication API specification](https://w3c.github.io/webauthn/#registering-a-new-credential). Assuming that the checks pan out, the server will store the new public key associated with the user's account for future use — that is, whenever the user desires to use the public key for authentication.
+After a user has registered with WebAuthn, they can authenticate (i.e., login) with the service. The authentication flow looks similar to the registration flow, the main differences being that authentication:
-### Authentication
+1. Doesn't require user or relying party information
+2. Creates an assertion using the previously-generated key pair for the service, rather than the authenticator's key pair.
-After a user has registered with web authentication, they can subsequently authenticate (a.k.a. - login or sign-in) with the service. The authentication flow looks similar to the registration flow, and the illustration of actions in Figure 2 may be recognizable as being similar to the illustration of registration actions in Figure 1. The primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. Again, the description of authentication below is a broad overview rather than getting into all the options and features of the Web Authentication API. The specific options for authenticating can be found in the {{domxref("PublicKeyCredentialRequestOptions")}} dictionary, and the resulting data can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAssertionResponse")}} interface) .
+A typical authentication flow is as follows:
-![WebAuthn authentication component and dataflow diagram](mdn_webauthn_authentication_r1.png)
+1. The relying party generates a "challenge" and sends it to the user agent using an appropriate secure mechanism, along with a list of relying party and user credentials. It can also indicate where to look for the credential, e.g., on a local built-in authenticator, or on an external one over USB, BLE, etc.
-_Figure 2 - similar to Figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action._
+2. The browser asks the authenticator to sign the challenge via a {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} call, which is passed the credentials in a `publicKey` option.
-First (labeled step 0 in the diagram), the application makes the initial authentication request. The protocol and format of this request are outside the scope of the Web Authentication API.
+ A typical `get()` call might look like so:
-After this, the authentication steps are:
+ ```js
+ let credential = await navigator.credentials.get({
+ publicKey: {
+ challenge: new Uint8Array([139, 66, 181, 87, 7, 203, ...]),
+ rpId: "acme.com",
+ allowCredentials: [{
+ type: "public-key",
+ id: new Uint8Array([64, 66, 25, 78, 168, 226, 174, ...])
+ }],
+ userVerification: "required",
+ }
+ });
+ ```
-1. **Server Sends Challenge** - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be [REST](/en-US/docs/Glossary/REST) over https (probably using [XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest) or [Fetch](/en-US/docs/Web/API/Fetch_API)), but they could also be [SOAP](/en-US/docs/Glossary/SOAP), [RFC 2549](https://datatracker.ietf.org/doc/html/rfc2549) or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the [get()](/en-US/docs/Web/API/CredentialsContainer/get) call, typically with little or no modification. **Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.**
-2. **Browser Calls authenticatorGetCredential() on Authenticator** - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
-3. **Authenticator Creates an Assertion** - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.
-4. **Authenticator Returns Data to Browser** - The authenticator returns the authenticatorData and assertion signature back to the browser.
-5. **Browser Creates Final Data, Application sends response to Server** - The browser resolves the [Promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.
-6. **Server Validates and Finalizes Authentication** - Upon receiving the result of the authentication request, the server performs validation of the response such as:
+ The parameters of the `get()` call are passed to the authenticator to handle the authentication.
+
+3. If the authenticator contains one of the given credentials and is able to successfully sign the challenge, it returns a signed assertion to the web app after receiving user consent. This is provided when the {{jsxref("Promise")}} returned by the `get()` call fulfills, in the form of a {{domxref("PublicKeyCredential")}} object instance (the {{domxref("PublicKeyCredential.response")}} property contains the assertion information).
+
+4. The web app forwards the signed assertion to the relying party server for the relying party to validate. The validation checks include:
1. Using the public key that was stored during the registration request to validate the signature by the authenticator.
2. Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.
3. Checking that the Relying Party ID is the one expected for this service.
- A full list of the [steps for validating an assertion can be found in the Web Authentication API specification](https://w3c.github.io/webauthn/#verifying-assertion). Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the Web Authentication API specification, but one option would be to drop a new cookie for the user session.
+5. Once verified by the server, the authentication flow is considered successful.
+
+## Controlling access to the API
+
+The availability of WebAuthn can be controlled using a [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy), specifying two directives in particular:
+
+- {{httpheader("Permissions-Policy/publickey-credentials-create", "publickey-credentials-create")}}: Controls the availability of {{domxref("CredentialsContainer.create", "navigator.credentials.create()")}} with the `publicKey` option.
+- {{httpheader("Permissions-Policy/publickey-credentials-get", "publickey-credentials-get")}}: Controls the availability of {{domxref("CredentialsContainer.get", "navigator.credentials.get()")}} with the `publicKey` option.
+
+Both directives have a default allowlist value of `"self"`, meaning that by default these methods can be used in top-level document contexts. In addition, `get()` can be used in nested browsing contexts loaded from the same origin as the top-most document; `create()` on the other hand cannot be used in {{htmlelement("iframe")}}s.
+
+> **Note:** Where a policy forbids use of these methods, the {{jsxref("Promise", "promises")}} returned by them will reject with a `SecurityError` {{domxref("DOMException")}}.
+
+### Basic access control
+
+If you wish to allow access to a specific subdomain only, you could provide it like this:
+
+```http
+Permissions-Policy: publickey-credentials-get=("https://subdomain.example.com")
+Permissions-Policy: publickey-credentials-create=("https://subdomain.example.com")
+```
+
+### Allowing embedded `get()` calls in an `