recursal/MDN huggingface dataset:
KeyboardEvent: location property
================================

 The **`KeyboardEvent.location`** read-only property returns an
 `unsigned long` representing the location of the key on the keyboard or other
 input device.

Possible values are:

| Constant | Value | Description |
| --- | --- | --- |
| `DOM_KEY_LOCATION_STANDARD` | 0 | 
 The key has only one version, or can't be distinguished between the left
 and right versions of the key, and was not pressed on the numeric keypad
 or a key that is considered to be part of the keypad.
  |
| `DOM_KEY_LOCATION_LEFT` | 1 | 
 The key was the left-hand version of the key; for example, the left-hand
 `Control` key was pressed on a standard 101 key US keyboard.
 This value is only used for keys that have more than one possible
 location on the keyboard.
  |
| `DOM_KEY_LOCATION_RIGHT` | 2 | 
 The key was the right-hand version of the key; for example, the
 right-hand `Control` key is pressed on a standard 101 key US
 keyboard. This value is only used for keys that have more than one
 possible location on the keyboard.
  |
| `DOM_KEY_LOCATION_NUMPAD` | 3 | 
 The key was on the numeric keypad, or has a virtual key code that
 corresponds to the numeric keypad.


**Note:** When `NumLock` is locked, Firefox
 always returns `DOM_KEY_LOCATION_NUMPAD` for the keys on
 the numeric pad. Otherwise, when `NumLock` is unlocked and
 the keyboard actually has a numeric keypad, Firefox always returns
 `DOM_KEY_LOCATION_NUMPAD` too. On the other hand, if the
 keyboard doesn't have a keypad, such as on a notebook computer, some
 keys become Numpad only when NumLock is locked. When such keys fires
 key events, the location attribute value depends on the key. That
 is, it must not be `DOM_KEY_LOCATION_NUMPAD`.


**Note:** `NumLock` key's key events indicate
 `DOM_KEY_LOCATION_STANDARD` both on Firefox and Internet
 Explorer.

 |
| `DOM_KEY_LOCATION_MOBILE`

Non-standard

Deprecated
 | 4 | 
 The key was on a mobile device; this can be on either a physical
 keypad or a virtual keyboard.
  |
| `DOM_KEY_LOCATION_JOYSTICK` 
Non-standard

Deprecated
 | 5 | 
 The key was a button on a game controller or a joystick on a mobile
 device.
  |

Value
-----

A number.

Examples
--------


```js
function keyEvent(event) {
  console.log(`Location of key pressed: ${event.location}`);
}
```

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

| Specification |
| --- |
| UI Events # dom-keyboardevent-location |

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

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

See also
--------

* `KeyboardEvent`
KeyboardEvent: metaKey property
===============================

 The **`KeyboardEvent.metaKey`** read-only property returning a
 boolean value that indicates if the `Meta` key was pressed
 (`true`) or not (`false`) when the event occurred. Some operating
 systems may intercept the key so it is never detected.

**Note:** On Macintosh keyboards, this is the `⌘ Command` key.


**Note:** Before Firefox 118, the `⊞ Windows` key was handled
 as an "OS" key rather than the "Meta" key. `KeyboardEvent.metaKey` was
 `false` when the `⊞ Windows` key was pressed.


Value
-----

A boolean value.

Examples
--------


```html
<button onclick="ismetaKey(event)">Click me with the meta key</button>

<p id="output"></p>
```



```js
function ismetaKey(e) {
  document.querySelector("#output").textContent =
    `metaKey pressed? ${e.metaKey}`;
}
```

### Result

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

| Specification |
| --- |
| UI Events # dom-keyboardevent-metakey |

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

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

See also
--------

* `KeyboardEvent`
TextFormatUpdateEvent: getTextFormats() method
==============================================

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

The **`getTextFormats()`** method of the `TextFormatUpdateEvent` interface returns an `Array` of `TextFormat` objects that represent the formats that an Input Method Editor (IME) window wants to apply to the text being composed.

Syntax
------


```js
getTextFormats()
```

### Return value

An `Array` containing `TextFormat` objects.

Examples
--------

### Styling IME-composed text

In the following example, the `textformatupdate` event is used to update the formatting of the text in the editable region.


```html
<canvas id="editor-canvas"></canvas>
```



```js
const TEXT\_X = 10;
const TEXT\_Y = 10;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");

const editContext = new EditContext();
canvas.editContext = editContext;

editContext.addEventListener("textformatupdate", (e) => {
  // Clear the canvas.
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Render the text.
  ctx.fillText(editContext.text, TEXT\_X, TEXT\_Y);
  console.log(`Rendering text: ${editContext.text}`);

  // Get the text formats that the IME window wants to apply.
  const formats = e.getTextFormats();

  // Iterate over the text formats
  for (const format of formats) {
    const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;

    console.log(
      `Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
    );

    const underlineXStart = ctx.measureText(
      editContext.text.substring(0, rangeStart),
    ).width;
    const underlineXEnd = ctx.measureText(
      editContext.text.substring(0, rangeEnd),
    ).width;
    const underlineY = TEXT\_Y + 3;

    // For brevity, this example only draws a simple underline.
    // Use underlineStyle and underlineThickness to draw the correct underline.

    ctx.beginPath();
    ctx.moveTo(TEXT\_X + underlineXStart, underlineY);
    ctx.lineTo(TEXT\_X + underlineXEnd, underlineY);
    ctx.stroke();
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-textformatupdateevent-gettextformats |

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

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

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

The **`TextFormatUpdateEvent()`** constructor returns a new `TextFormatUpdateEvent` object.

Syntax
------


```js
new TextFormatUpdateEvent(type)
new TextFormatUpdateEvent(type, options)
```

### Parameters

`type`

A string representing the type of the event. Possible values: `"textformatupdate"`.

`options` Optional

An optional object with the following properties:

`textFormats`

An `Array` of `TextFormat` objects representing the text formats that need to be applied with this event.


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

| Specification |
| --- |
| EditContext API # dom-textformatupdateevent-constructor |

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

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

See also
--------

* The `TextFormatUpdateEvent` interface it belongs to.
DocumentPictureInPictureEvent: DocumentPictureInPictureEvent() constructor
==========================================================================

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

 The **`DocumentPictureInPictureEvent()`** constructor creates a new
 `DocumentPictureInPictureEvent` object instance.

Syntax
------


```js
new DocumentPictureInPictureEvent(type, init)
```

### Parameters

`type`

A string representing the type of event. In the case of `DocumentPictureInPictureEvent` this is always `enter`.

`init`

An object containing the following properties:

`window`

A `Window` instance representing the browsing context inside the `DocumentPictureInPicture` window the event was fired on.


Examples
--------

A developer would not use this constructor manually. A new `DocumentPictureInPictureEvent` object is constructed when a handler is invoked as a result of the `enter` event firing.


```js
documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("Video player has entered the pip window");

  const pipMuteButton = pipWindow.document.createElement("button");
  pipMuteButton.textContent = "Mute";
  pipMuteButton.addEventListener("click", () => {
    const pipVideo = pipWindow.document.querySelector("#video");
    if (!pipVideo.muted) {
      pipVideo.muted = true;
      pipMuteButton.textContent = "Unmute";
    } else {
      pipVideo.muted = false;
      pipMuteButton.textContent = "Mute";
    }
  });

  pipWindow.document.body.append(pipMuteButton);
});
```

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

| Specification |
| --- |
| Document Picture-in-Picture Specification # dom-documentpictureinpictureevent-documentpictureinpictureevent |

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

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

See also
--------

* Document Picture-in-Picture API
* Using the Document Picture-in-Picture API
DocumentPictureInPictureEvent: window property
==============================================

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

 The **`window`** read-only property of the
 `DocumentPictureInPictureEvent` interface returns a `Window` instance representing the browsing context inside the `DocumentPictureInPicture` window the event was fired on.

Value
-----

A `Window` object instance.

Examples
--------


```js
documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("Video player has entered the pip window");

  const pipMuteButton = pipWindow.document.createElement("button");
  pipMuteButton.textContent = "Mute";
  pipMuteButton.addEventListener("click", () => {
    const pipVideo = pipWindow.document.querySelector("#video");
    if (!pipVideo.muted) {
      pipVideo.muted = true;
      pipMuteButton.textContent = "Unmute";
    } else {
      pipVideo.muted = false;
      pipMuteButton.textContent = "Mute";
    }
  });

  pipWindow.document.body.append(pipMuteButton);
});
```

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

| Specification |
| --- |
| Document Picture-in-Picture Specification # dom-documentpictureinpictureevent-window |

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

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

See also
--------

* Document Picture-in-Picture API
* Using the Document Picture-in-Picture API
VideoPlaybackQuality: droppedVideoFrames property
=================================================

 The read-only **`droppedVideoFrames`**
 property of the `VideoPlaybackQuality` interface returns the number of
 video frames which have been dropped rather than being displayed since the last time
 the media was loaded into the `HTMLVideoElement`.

Value
-----

 An unsigned 64-bit value indicating the number of frames that have been dropped since
 the last time the media in the `<video>` element was loaded or reloaded.
 This information can be used to determine whether or not to downgrade the video stream
 to avoid dropping frames.

 Frames are typically dropped either before or after decoding them, when it's determined
 that it will not be possible to draw them to the screen at the correct time.

Examples
--------

 This example calls `getVideoPlaybackQuality()` to obtain a `VideoPlaybackQuality` object,
 then determines what percentage of frames have been dropped. That value is then
 presented in an element for the user's reference.


```js
const videoElem = document.getElementById("my\_vid");
const percentElem = document.getElementById("percent");
const quality = videoElem.getVideoPlaybackQuality();

const dropPercent =
  (quality.droppedVideoFrames / quality.totalVideoFrames) \* 100;
percentElem.innerText = Math.trunc(dropPercent).toString(10);
```

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

| Specification |
| --- |
| Media Playback Quality # dom-videoplaybackquality-droppedvideoframes |

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method, which creates
 and returns `VideoPlaybackQuality` objects
VideoPlaybackQuality: corruptedVideoFrames property
===================================================

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

 The `VideoPlaybackQuality` interface's read-only
 **`corruptedVideoFrames`** property the number of corrupted
 video frames that have been received since the `<video>` element was
 last loaded or reloaded.

Value
-----

 The number of corrupted video frames that have been received since the
 `<video>` element was last loaded or reloaded.

 It is up to the user agent to determine whether or not to display a
 corrupted video frame. If a corrupted frame is dropped, then both
 `corruptedVideoFrames` and
 `droppedVideoFrames` are
 incremented.

Examples
--------

 This example determines the percentage of frames which have been corrupted, and if the
 value is greater than 5%, calls a function called `downgradeVideo()` that
 would be implemented to switch to a different video that might tax the network less.


```js
const videoElem = document.getElementById("my\_vid");
const quality = videoElem.getVideoPlaybackQuality();

if (quality.corruptedVideoFrames / quality.totalVideoFrames > 0.05) {
  downgradeVideo(videoElem);
}
```

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

| Specification |
| --- |
| Media Playback Quality # dom-videoplaybackquality-corruptedvideoframes |

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method for
 constructing and returning this interface
VideoPlaybackQuality: creationTime property
===========================================

 The read-only **`creationTime`** property on the
 `VideoPlaybackQuality` interface reports the number of milliseconds since
 the browsing context was created this quality sample was recorded.

Value
-----

 A `DOMHighResTimeStamp` object which indicates the number of milliseconds
 that elapsed between the time the browsing context was created and the time at which
 this sample of the video quality was obtained.

For details on how the time is determined, see `Performance.now()`.

Examples
--------

 This example calls `getVideoPlaybackQuality()` to obtain a
 `VideoPlaybackQuality` object, then determines what percentage of frames
 have been lost by either corruption or being dropped. If that exceeds 10% (0.1), a
 function called `lostFramesThresholdExceeded()` is called to, perhaps,
 update a quality indicator to show an increase in frame loss.


```js
const videoElem = document.getElementById("my\_vid");
const quality = videoElem.getVideoPlaybackQuality();

if (
  (quality.corruptedVideoFrames + quality.droppedVideoFrames) /
    quality.totalVideoFrames >
  0.1
) {
  lostFramesThresholdExceeded();
}
```

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

| Specification |
| --- |
| Media Playback Quality # dom-videoplaybackquality-creationtime |

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method, which
 returns `VideoPlaybackQuality` objects
VideoPlaybackQuality: totalVideoFrames property
===============================================

 The `VideoPlaybackQuality` interface's
 **`totalVideoFrames`** read-only property returns the total
 number of video frames that have been displayed or dropped since the media was
 loaded.

Value
-----

 The total number of frames that the `<video>` element has displayed or
 dropped since the media was loaded into it. Essentially, this is the number of frames
 the element *would have presented* had no problems occurred.

This value is reset when the media is reloaded or replaced.

Examples
--------

 This example calls `getVideoPlaybackQuality()` to obtain a `VideoPlaybackQuality` object,
 then determines what percentage of frames have been lost by either corruption or being
 dropped. If that exceeds 10% (0.1), a function called
 `lostFramesThresholdExceeded()` is called to, perhaps, update a quality
 indicator to show an increase in frame loss.


```js
const videoElem = document.getElementById("my\_vid");
const quality = videoElem.getVideoPlaybackQuality();

if (
  (quality.corruptedVideoFrames + quality.droppedVideoFrames) /
    quality.totalVideoFrames >
  0.1
) {
  lostFramesThresholdExceeded();
}
```


 A similar algorithm might be used to attempt to switch to a lower-resolution video that
 requires less bandwidth, in order to avoid dropping frames.

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

| Specification |
| --- |
| Media Playback Quality # dom-videoplaybackquality-totalvideoframes |

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method for
 constructing and returning this interface.
VideoPlaybackQuality: totalFrameDelay property
==============================================

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`VideoPlaybackQuality.totalFrameDelay`** read-only
 property returns a `double` containing the sum of the frame delay since the
 creation of the associated `HTMLVideoElement`. The frame delay is the
 difference between a frame's theoretical presentation time and its effective display
 time.

Value
-----

A number.

Examples
--------


```js
const videoElt = document.getElementById("my\_vid");
const quality = videoElt.getVideoPlaybackQuality();

alert(quality.totalFrameDelay);
```

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

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

See also
--------

* The `HTMLVideoElement.getVideoPlaybackQuality()` method for
 constructing and returning this interface.
* `MediaSource`
* `SourceBuffer`
GeolocationPositionError: message property
==========================================

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

The **`message`** read-only property of the `GeolocationPositionError` interface returns a human-readable string describing the details of the error.

Value
-----

A human-readable string describing the details of the error.

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

| Specification |
| --- |
| Geolocation API # message-attribute |

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

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

See also
--------

* Using the Geolocation API
* `GeolocationPositionError`
GeolocationPositionError: code property
=======================================

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

The **`code`** read-only property of the `GeolocationPositionError` interface is an `unsigned short` representing the error code.

The following values are possible:

| Value | Associated constant | Description |
| --- | --- | --- |
| `1` | `PERMISSION_DENIED` | 
 The acquisition of the geolocation information failed because the page
 didn't have the permission to do it.
  |
| `2` | `POSITION_UNAVAILABLE` | The acquisition of the geolocation failed because one or several internal sources of position returned an internal error. |
| `3` | `TIMEOUT` | Geolocation information was not obtained in the allowed time. |

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

| Specification |
| --- |
| Geolocation API # code-attribute |

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

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

See also
--------

* Using geolocation
* `GeolocationPositionError`
CookieStore: set() method
=========================

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

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

The **`set()`** method of the `CookieStore` interface sets a cookie with the given name and value or options object.

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

Syntax
------


```js
set(name, value)
set(options)
```

### Parameters

This method requires one of the following:

`name` Optional

A string with the name of the cookie.

`value` Optional

A string with the value of the cookie.

Or

`options` Optional

An object containing:

`domain` Optional

A string containing the domain of the cookie. Defaults to `null`.

`expires` Optional

A timestamp, given as Unix time in milliseconds, containing the expiration date of the cookie. Defaults to `null`.

`name`

A string with the name of a cookie.

`partitioned` Optional

A boolean value that defaults to `false`. If set to `true`, the set cookie will be a partitioned cookie. See Cookies Having Independent Partitioned State (CHIPS) for more information.

`path` Optional

A string containing the path of the cookie. Defaults to `/`.

`sameSite` Optional

One of the following `SameSite` values:

`"strict"`

Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. This is the default.

`"lax"`

Cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is navigating to the origin site (i.e. when following a link).

`"none"`

Cookies will be sent in all contexts.


`value`

A string with the value of the cookie.


### Return value

A `Promise` that resolves with `undefined` when setting the cookie completes.

### Exceptions

`SecurityError` `DOMException`

Thrown if the origin can not be serialized to a URL.

`TypeError`

Thrown if setting the cookie with the given `name` and `value` or `options` fails.

Examples
--------

The following example sets a cookie by passing an object with `name`, `value`, `expires`, and `domain`.


```js
const day = 24 \* 60 \* 60 \* 1000;

cookieStore.set({
  name: "cookie1",
  value: "cookie1-value",
  expires: Date.now() + day,
  domain: "example.com",
});
```

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

| Specification |
| --- |
| Cookie Store API # dom-cookiestore-set |

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

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