recursal/MDN huggingface dataset:
HighlightRegistry: keys() method
================================

The **`keys()`** method of the `HighlightRegistry` interface returns a new Iterator object that contains the keys for each `Highlight` object in the `HighlightRegistry` object in insertion order.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.keys()`.

Syntax
------


```js
keys()
```

### Return value

A new iterator object containing the names of each `Highlight` object in the registry, in insertion order.

Examples
--------

The following code snippet shows how to create and register three `Highlight` objects, and use the iterator returned by the `keys()` method to log their names:


```js
const fooHighlight = new Highlight();
const barHighlight = new Highlight();
const bazHighlight = new Highlight();

CSS.highlights.set("foo", fooHighlight);
CSS.highlights.set("bar", barHighlight);
CSS.highlights.set("baz", bazHighlight);

const iter = CSS.highlights.keys();

console.log(iter.next().value); // "foo"
console.log(iter.next().value); // "bar"
console.log(iter.next().value); // "baz"
```


The following code example shows how to iterate over the highlights in the registry by using a `for...of` loop:


```js
const fooHighlight = new Highlight();
const barHighlight = new Highlight();
const bazHighlight = new Highlight();

CSS.highlights.set("foo", fooHighlight);
CSS.highlights.set("bar", barHighlight);
CSS.highlights.set("baz", bazHighlight);

for (const name of CSS.highlights.keys()) {
  console.log(name);
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.keys |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: set() method
===============================

The **`set()`** method of the `HighlightRegistry` interface adds or updates a `Highlight` object in the registry with the specified name.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.set()`.

Syntax
------


```js
set(name, highlight)
```

### Parameters

`name`

The name of the `Highlight` object to add or update. The name must be a `String`.

`highlight`

The `Highlight` object to add or update. This must be a `Highlight` interface instance.

### Return value

The `HighlightRegistry` object.

Examples
--------

### Using set()


```js
const fooHighlight = new Highlight();
CSS.highlights.set("foo", fooHighlight);
```

### Using set() with chaining

Since the `set()` method returns back the registry, you can chain the method call like below:


```js
const fooHighlight = new Highlight();
const barHighlight = new Highlight();
const bazHighlight = new Highlight();

CSS.highlights
  .set("foo", fooHighlight)
  .set("bar", barHighlight)
  .set("baz", bazHighlight);
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.set |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: values() method
==================================

The **`values()`** method of the `HighlightRegistry` interface returns a new Iterator object that contains the values for each `Highlight` object in the `HighlightRegistry` object in insertion order.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.values()`.

Syntax
------


```js
values()
```

### Return value

A new iterator object containing each `Highlight` object in the registry, in insertion order.

Examples
--------

The following code snippet shows how to create and register three `Highlight` objects, and use the iterator returned by the `values()` method to log the highlights:


```js
const fooHighlight = new Highlight();
const barHighlight = new Highlight();
const bazHighlight = new Highlight();

CSS.highlights.set("foo", fooHighlight);
CSS.highlights.set("bar", barHighlight);
CSS.highlights.set("baz", bazHighlight);

const iter = CSS.highlights.values();

console.log(iter.next().value); // Highlight
console.log(iter.next().value); // Highlight
console.log(iter.next().value); // Highlight
```


The following code example shows how to iterate over the highlights in the registry by using a `for...of` loop:


```js
const fooHighlight = new Highlight();
const barHighlight = new Highlight();
const bazHighlight = new Highlight();

CSS.highlights.set("foo", fooHighlight);
CSS.highlights.set("bar", barHighlight);
CSS.highlights.set("baz", bazHighlight);

for (const highlight of CSS.highlights.values()) {
  console.log(highlight); // Highlight
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.values |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: size property
================================

The **`size`** property returns the number of `Highlight` objects in the `HighlightRegistry`.

Value
-----

A read-only integer indicating how many `Highlight` objects the registry contains.

Examples
--------

### Using size


```js
const highlight1 = new Highlight();
const highlight2 = new Highlight();

CSS.highlights.set("highlight-1", highlight1);
CSS.highlights.set("highlight-2", highlight2);

console.log(CSS.highlights.size); // 2
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-map.prototype.size |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
HighlightRegistry: forEach() method
===================================

The **`forEach()`** method of the `HighlightRegistry` interface executes a provided function once for each `Highlight` object in the registry, in insertion order.

`HighlightRegistry` is a `Map`-like object, so this is similar to using `Map.forEach()`.

Syntax
------


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callback`

Function to execute for each `Highlight` object, taking three arguments:

`highlight`

The current highlight.

`name`

The highlight name.

`registry`

The registry object which `forEach()` was called upon.


`thisArg`

Value to use as `this` when executing `callbackFn`.

### Return value

None (`undefined`).

Examples
--------

The code snippet below shows how create a new highlight with two ranges, and then log the ranges by using the `forEach()` method:


```js
function logAllHighlights(highlight, name) {
  console.log(`Highlight ${name} exists in the registry`, highlight);
}

const customHighlight1 = new Highlight();
const customHighlight2 = new Highlight();
const customHighlight3 = new Highlight();

CSS.highlights.set("custom-highlight-1", customHighlight1);
CSS.highlights.set("custom-highlight-2", customHighlight2);
CSS.highlights.set("custom-highlight-3", customHighlight3);

CSS.highlights.forEach(logAllHighlights);
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.foreach |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
CSSKeyframeRule: keyText property
=================================

The **`keyText`** property of the `CSSKeyframeRule` interface represents the keyframe selector as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively.

Value
-----

A string.

### Exceptions

`SyntaxError`

Thrown if `keyText` is updated with an invalid keyframe selector, in which case `keyText` remains untouched.

Examples
--------

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


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

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



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].keyText); // a string containing 0%
```

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

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

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The read-only **`priority`** property of the `TaskSignal` interface indicates the signal priority.

 The initial value is set in the associated `TaskController` by specifying it as an argument to the `TaskController` constructor (by default it is `"user-visible"`).
 The priority of the signal can be changed by calling `TaskController.setPriority()` on the associated controller.

 For tasks with a mutable priority, this value is used to set the initial task priority and later to change it.
 Tasks with an immutable priority will ignore the value.

Value
-----

 A string indicating the signal priority.
 This will be one of: `"user-blocking"`, `"user-visible"`, `"background"`.

Examples
--------

 The `priority` is most commonly used by developers to determine the new priority following `prioritychange` events.
 See TaskSignal: prioritychange event for a live example.

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

| Specification |
| --- |
| Prioritized Task Scheduling # dom-tasksignal-priority |

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

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

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

The **`TaskSignal.any()`** static method takes an iterable of `AbortSignal` objects and returns a `TaskSignal`. The returned task signal is aborted when any of the abort signals is aborted.

When the task signal is aborted, its `reason` property will be set to the reason of the first signal that is aborted.

Syntax
------


```js
TaskSignal.any(signals)
TaskSignal.any(signals, init)
```

### Parameters

`signals`

An iterable (such as an `Array`) of abort signals.

`init` Optional

Contains optional configuration parameters. Currently only one property is defined:

`priority` Optional

One of the following:

* A string which is one of `user-blocking`, `user-visible` and `background`.
* A `TaskSignal`.


### Return value

A `TaskSignal` instance. It will be aborted when the first signal passed into `signals` is aborted. When this happens:

* Its `reason` property will be set to the reason of the signal that caused this signal to abort.
* Its `priority` property will be determined by the `priority` parameter:
    + If the `priority` parameter was a string, it will be the value of the string.
    + If the `priority` parameter was a `TaskSignal`, it will be the value of that signal's `priority`.
Examples
--------

### Using `TaskSignal.any()`

This example demonstrates combining both a signal from a `TaskController`, and a timeout signal from `TaskSignal.timeout()`.


```js
const cancelDownloadButton = document.getElementById("cancelDownloadButton");

const userCancelController = new TaskController({
  priority: "user-visible",
});

cancelDownloadButton.addEventListener("click", () => {
  userCancelController.abort();
});

// Timeout after 5 minutes
const timeoutSignal = TaskSignal.timeout(1\_000 \* 60 \* 5);

// This signal will abort when either the user clicks the cancel button or 5 minutes is up whichever is sooner
const combinedSignal = TaskSignal.any([
  userCancelController.signal,
  timeoutSignal,
]);

try {
  const res = await fetch(someUrlToDownload, {
    // Stop the fetch when any of the
    signal: combinedSignal,
  });
  const body = await res.blob();
  // Do something with downloaded content
  // ...
} catch (e) {
  if (e.name === "AbortError") {
    // Cancelled by the user
  } else if (e.name === "TimeoutError") {
    // Show user that download timed out
  } else {
    // Other error, e.g. network error
  }
}
```

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

| Specification |
| --- |
| Prioritized Task Scheduling # dom-tasksignal-any |

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

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

See also
--------

* `AbortSignal.any()`
TaskSignal: prioritychange event
================================

The **`prioritychange`** event is sent to a `TaskSignal` if its priority is changed.

Syntax
------

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


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

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

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

A `TaskPriorityChangeEvent`. Inherits from `Event`.

Event

TaskPriorityChangeEventEvent properties
----------------

`TaskPriorityChangeEvent.previousPriority`

 Indicates the previous priority of the task (before it was changed).
 The new/updated priority is read from `event.target.priority` (`TaskSignal.priority`).


Examples
--------

The example below shows how to listen for the `prioritychange` event on a `TaskSignal`.
```

<textarea id="log" style="min-height: 70px; width: 95%"></textarea>
```


```
let log = document.getElementById("log");
function mylog(text) {
  log.textContent += `${text}\n`;
}
```


 First we create a controller, and add an event listener to its signal.
 When handling the event we use `previousPriority` on the event to get the original priority and `TaskSignal.priority` on the event target to get the new/current priority.

The task is then posted, passing in the signal, and then we immediately change the priority.


```js
if ("scheduler" in this) {
  // Declare a TaskController, setting its signal priority to 'user-blocking'
  const controller = new TaskController({ priority: "user-blocking" });

  // Listen for 'prioritychange' events on the controller's signal.
  controller.signal.addEventListener("prioritychange", (event) => {
    const previousPriority = event.previousPriority;
    const newPriority = event.target.priority;
    mylog(`Priority changed from ${previousPriority} to ${newPriority}.`);
  });

  // Post task using the controller's signal.
  // The signal priority sets the initial priority of the task
  scheduler.postTask(
    () => {
      mylog("Task 1");
    },
    { signal: controller.signal },
  );

  // Change the priority to 'background' using the controller
  controller.setPriority("background");
}
```


**Note:** The code above uses a custom logging function `mylog()` to log to the text area below.
 This is hidden as it isn't relevant to the example.


 The output below demonstrates shows that the task's priority changed from `user-blocking` to `background`.
 This happens before the task is executed, but could also happen when the task is running.

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

| Specification |
| --- |
| Prioritized Task Scheduling # ref-for-eventdef-tasksignal-prioritychange |
| Prioritized Task Scheduling # dom-tasksignal-onprioritychange |

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

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

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

The `CaptureController` constructor creates a new `CaptureController` object instance.

Syntax
------


```js
CaptureController()
```

### Parameters

None.

Examples
--------


```js
// Create a new CaptureController instance
const controller = new CaptureController();

// Prompt the user to share a tab, window, or screen.
const stream = await navigator.mediaDevices.getDisplayMedia({ controller });

// Query the displaySurface value of the captured video track
const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;

if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("no-focus-change");
}
```

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

| Specification |
| --- |
| Screen Capture # dom-capturecontroller-setfocusbehavior |

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

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

See also
--------

* Screen Capture API
* `MediaDevices.getDisplayMedia()`
* Better screen sharing with Conditional Focus
CaptureController: setFocusBehavior() method
============================================

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

The `CaptureController` interface's **`setFocusBehavior()`** method controls whether the captured tab or window will be focused when an associated `MediaDevices.getDisplayMedia()` `Promise` fulfills, or whether the focus will remain with the tab containing the capturing app.

You can set this behavior multiple times before the `MediaDevices.getDisplayMedia()` call, or once immediately after its `Promise` resolves. After that, the focus behavior is said to be finalized, and can't be changed.

Syntax
------


```js
setFocusBehavior(focusBehavior)
```

### Parameters

`focusBehavior`

An enumerated value that describes whether the user agent should transfer focus to the captured display surface, or keep the capturing app focused. Possible values are `focus-captured-surface` (transfer focus) and `no-focus-change` (keep focus on the capturing app).

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if:

* The capture stream has been stopped.
* The user chose to share a screen (`displaySurface` type `monitor`) rather than a `browser` tab or `window` — you can't focus a monitor. In this case the exception is thrown after the `MediaDevices.getDisplayMedia()` `Promise` resolves.
* Enough time has elapsed after the `MediaDevices.getDisplayMedia()` `Promise` fulfills that the focus behavior has been finalized.

Examples
--------


```js
// Create a new CaptureController instance
const controller = new CaptureController();

// Prompt the user to share a tab, window, or screen.
const stream = await navigator.mediaDevices.getDisplayMedia({ controller });

// Query the displaySurface value of the captured video track
const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;

if (displaySurface == "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("no-focus-change");
}
```

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

| Specification |
| --- |
| Screen Capture # dom-capturecontroller-setfocusbehavior |

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

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

See also
--------

* Screen Capture API
* `MediaDevices.getDisplayMedia()`
* Better screen sharing with Conditional Focus
WEBGL\_debug\_shaders: getTranslatedShaderSource() method
=========================================================

 The **`WEBGL_debug_shaders.getTranslatedShaderSource()`**
 method is part of the WebGL API and allows
 you to debug a translated shader.

Syntax
------


```js
getTranslatedShaderSource(shader)
```

### Parameters

`shader`

A `WebGLShader` to get the translated source from.

### Return value

 A `String` containing the translated shader source. An empty string is
 returned, if:

* no source has been defined or,
* `WebGLRenderingContext.compileShader()` has not yet been called or,
* the translation for the shader failed.
Examples
--------


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

const shader = gl.createShader(gl.FRAGMENT\_SHADER);
gl.shaderSource(
  shader,
  "void main() { gl\_FragColor = vec4(gl\_FragCoord.x, 0.0, 0.0, 1.0); }",
);
gl.compileShader(shader);

const src = gl
  .getExtension("WEBGL\_debug\_shaders")
  .getTranslatedShaderSource(shader);
console.log(src);
// "void main(){
// (gl\_FragColor = vec4(gl\_FragCoord.x, 0.0, 0.0, 1.0));
// }"
```

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

| Specification |
| --- |
| WebGL WEBGL\_debug\_shaders Khronos Ratified Extension Specification  |

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

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

See also
--------

* `WebGLShader`
* `WebGLRenderingContext.compileShader()`
XRHitTestResult: createAnchor() method
======================================

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

The **`createAnchor()`** method of the `XRHitTestResult` interface creates an `XRAnchor` from a hit test result that is attached to a real-world object.

Syntax
------


```js
createAnchor()
```

### Parameters

None.

### Return value

A `Promise` resolving with an `XRAnchor` object.

Examples
--------

### Creating an anchor from a hit test result

The following example starts with an `XRHitTestResult` retrieved by calling `XRFrame.getHitTestResults()`. After calling `createAnchor()`, the Promise resolves with an `XRAnchor` to attach a virtual object to that location.


```js
hitTestResult.createAnchor().then(
  (anchor) => {
    // add anchored objects to the scene
  },
  (error) => {
    console.error(`Could not create anchor: ${error}`);
  },
);
```

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

| Specification |
| --- |
| WebXR Anchors Module # dom-xrhittestresult-createanchor |

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

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

See also
--------

* `XRAnchor`
* `XRFrame.createAnchor()`