recursal/MDN huggingface dataset:
TextEncoderStream: writable property
====================================

The **`writable`** read-only property of the `TextEncoderStream` interface returns a `WritableStream`.

Value
-----

A `WritableStream`.

Examples
--------

The following example demonstrates how to return a `WritableStream` from a `TextEncoderStream` object.


```js
stream = new TextEncoderStream();
console.log(stream.writable); // A WritableStream
```

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

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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

The **`TextEncoderStream()`** constructor creates a new `TextEncoderStream` object which is used to convert a stream of strings into bytes using UTF-8 encoding.

Syntax
------


```js
new TextEncoderStream()
```

### Parameters

None.

Examples
--------

In this example a `TextEncoderStream` is created and used to upload a stream of text.


```js
const body = textStream.pipeThrough(new TextEncoderStream());
fetch("/dest", {
  method: "POST",
  body,
  headers: { "Content-Type": "text/plain; charset=UTF-8" },
});
```

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

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textencoderstream① |

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

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

The **`readable`** read-only property of the `TextEncoderStream` interface returns a `ReadableStream`.

Value
-----

A `ReadableStream`.

Examples
--------

The following example demonstrates how to return a `ReadableStream` from a `TextEncoderStream` object.


```js
stream = new TextEncoderStream();
console.log(stream.readable); //a ReadableStream
```

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

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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

 The **`encoding`** read-only property of the `TextEncoderStream` interface returns a
 string containing the name of the encoding algorithm used by the current `TextEncoderStream` object.

Value
-----

A string containing `utf-8` encoded data.

Examples
--------

The following example demonstrates how to return `encoding` from a `TextEncoderStream` object.


```js
stream = new TextEncoderStream();
console.log(stream.encoding);
```

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

| Specification |
| --- |
| Encoding Standard # dom-textencoder-encoding |

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

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

 The **`value`** property of the `HTMLDataElement`
 interface returns a string reflecting the `value` HTML attribute.

Value
-----

A string.

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

| Specification |
| --- |
| HTML Standard # dom-data-value |

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

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

 The **`insertDTMF()`** method on the `RTCDTMFSender` interface
 starts sending DTMF tones to the remote peer over the
 `RTCPeerConnection`.

 Sending of the tones is performed asynchronously,
 with `tonechange` events sent to the `RTCDTMFSender` every time
 a tone starts or ends.

 As long as the connection is active, you can send tones at any time. Calling
 `insertDTMF()` replaces any already-pending tones from the `toneBuffer`.
 You can abort sending queued tones by specifying an empty string (`""`) as the set of tones to play.
 Since `insertDTMF()` replaces the tone buffer, in order to add to the DTMF tones being played, it is necessary to call
 `insertDTMF` with a string containing both the remaining tones (stored in the `toneBuffer`) and the new tones appended together.

Syntax
------


```js
insertDTMF(tones)
insertDTMF(tones, duration)
insertDTMF(tones, duration, interToneGap)
```

### Parameters

`tones`

 A string containing the DTMF codes to be transmitted to the
 recipient. Specifying an empty string as the `tones` parameter clears the
 tone buffer, aborting any currently queued tones. A "," character inserts a two second
 delay.


`duration` Optional

 The amount of time, in milliseconds, that each DTMF tone should last. This value
 must be between 40 ms and 6000 ms (6 seconds), inclusive. The default is 100 ms.


`interToneGap` Optional

 The length of time, in milliseconds, to wait between tones. The browser will enforce
 a minimum value of 30 ms (that is, if you specify a lower value, 30 ms will be used
 instead); the default is 70 ms.


### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

 Thrown if the DTMF tones couldn't be sent because the track has been stopped or is in a
 read-only or inactive state.


`InvalidCharacterError` `DOMException`

Thrown if one or more of the characters in `tones` is not valid DTMF (0-9, A-Z, # or ,).

Examples
--------

tbd

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-RTCDTMFSender-insertDTMF |

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

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

See also
--------

* WebRTC API
* Using DTMF with WebRTC
* `RTCPeerConnection`
* `RTCDTMFSender`
* `RTCRtpSender`
RTCDTMFSender: tonechange event
===============================

The **`tonechange`** event is sent to an `RTCDTMFSender` by the WebRTC API to indicate when DTMF tones previously queued for sending (by calling `RTCDTMFSender.insertDTMF()`) begin and end.

To determine what tone started playing, or if a tone stopped playing, check the value of the event's `tone` property.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

An `RTCDTMFToneChangeEvent`. Inherits from `Event`.

Event

RTCDTMFToneChangeEventEvent properties
----------------

*In addition to the properties of `Event`, this interface offers the following:*

`RTCDTMFToneChangeEvent.tone` Read only 

A string specifying the tone which has begun playing, or an empty string (`""`) if the previous tone has finished playing.

Examples
--------

This example establishes a handler for the `tonechange` event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".

This can be done using `addEventListener()`:


```js
dtmfSender.addEventListener(
  "tonechange",
  (ev) => {
    let tone = ev.tone;
    if (tone === "") {
      tone = "&lt;none&gt;";
    }

    document.getElementById("playingTone").innerText = tone;
  },
  false,
);
```


You can also just set the `ontonechange` event handler property directly:


```js
dtmfSender.ontonechange = (ev) => {
  let tone = ev.tone;
  if (tone === "") {
    tone = "&lt;none&gt;";
  }

  document.getElementById("playingTone").innerText = tone;
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # event-RTCDTMFSender-tonechange |

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

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

 The `RTCDTMFSender` interface's toneBuffer property returns a string
 containing a list of the DTMF tones currently queued for sending to the
 remote peer over the `RTCPeerConnection`. To place tones into the buffer,
 call `insertDTMF()`.

Tones are removed from the string as they're played, so only upcoming tones are listed.

Value
-----

 A string listing the tones to be played. If the string is empty,
 there are no tones pending.

### Exceptions

`InvalidCharacterError` `DOMException`

Thrown if a character is not a DTMF tone character (0-9, A-D, # or ,).

### Tone buffer format

 The tone buffer is a string which can contain any combination of the characters that
 are permitted by the DTMF standard.

#### DTMF tone characters

The digits 0-9

These characters represent the digit keys on a telephone keypad.

The letters A-D

 These characters represent the "A" through "D" keys which are part of the DTMF
 standard but not included on most telephones. These are *not* interpreted as
 digits. Lower-case "a"-"d" automatically gets converted to upper-case.


The pound/hash sign ("#") and the asterisk ("\*")

 These correspond to the similarly-labeled keys which are typically on the bottom row
 of the telephone keypad.


The comma (",")

 This character instructs the dialing process to pause for two seconds before sending
 the next character in the buffer.




**Note:** All other characters are unrecognized and will cause
 `insertDTMF()` to throw an
 `InvalidCharacterError` `DOMException`.


#### Using tone buffer strings

 For example, if you're writing code to control a voicemail system by sending DTMF
 codes, you might use a string such as "\*,1,5555". In this example, we would send "\*" to
 request access to the VM system, then, after a pause, send a "1" to start playback of
 voicemail messages, then after a pause, dial "5555" as a PIN number to open the
 messages.

 Setting the tone buffer to an empty string (`""`) cancels any pending DTMF
 codes.

Example
-------

tbd

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-RTCDTMFSender-tonebuffer |

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

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

See also
--------

* WebRTC API
* Using DTMF with WebRTC
* `RTCDTMFSender.insertDTMF()`
* `RTCPeerConnection`
* `RTCDTMFSender`
* `RTCRtpSender`
CSSPageRule: style property
===========================

The **`style`** read-only property of the `CSSPageRule` interface returns a `CSSStyleDeclaration` object. This represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.

Value
-----

A `CSSStyleDeclaration` object, which represents a CSS declaration block with the following properties:

computed flag

Unset.

declarations

The declared declarations in the rule, in the order they were specified, shorthand properties expanded to longhands.

parent CSS rule

The context object, which is an alias for this.

owner node

Null.

Examples
--------

The stylesheet includes a `@page` rule. Getting a list of rules, then returning the value of the style property will return a `CSSStyleDeclaration` object.


```css
@page {
  margin: 1cm;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // returns a CSSStyleDeclaration object
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-style |

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

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

The **`selectorText`** property of the `CSSPageRule` interface gets and sets the selectors associated with the `CSSPageRule`.

Value
-----

A string.

Examples
--------

The stylesheet includes two `@page` rules. The `selectorText` property will return the literal selector text of `:first` as a string.


```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```



```js
let myRules = document.styleSheets[0].cssRules; //returns two myRules
console.log(myRules[1].selectorText); // returns the string ":first"
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-selectortext |

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

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

 The read-only **`root`** property of the
 `FileSystem` interface specifies a `FileSystemDirectoryEntry`
 object representing the root directory of the file system, for use with the File and Directory Entries API.

Value
-----

 A `FileSystemDirectoryEntry` representing the file system's root
 directory.

Examples
--------


```js
// tbd
```

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

| Specification |
| --- |
| File and Directory Entries API # dom-filesystem-root |

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystem`
FileSystem: name property
=========================

 The read-only **`name`** property of the
 `FileSystem` interface indicates the file system's name. This
 string is unique among all file systems currently exposed by the File and Directory Entries API.

Value
-----

A string representing the file system's name.

Examples
--------


```js
// tbd
```

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

| Specification |
| --- |
| File and Directory Entries API # dom-filesystem-name |

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystem`
HTMLDetailsElement: open property
=================================

 The **`open`** property of the
 `HTMLDetailsElement` interface is a boolean value reflecting the
 `open` HTML attribute, indicating whether the `<details>`'s contents (not counting the `<summary>`) is to be shown to the user.

Value
-----

A boolean value.

The boolean value represents the state of the `open` HTML attribute. The value of `true` means it is set with both the summary and the additional information shown to the user. The `false` value means it not set, with only the summary shown.

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

| Specification |
| --- |
| HTML Standard # dom-details-open |

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

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

See also
--------

* The `<details>` and `<summary>` elements
HTMLDetailsElement: toggle event
================================

The **`toggle`** event fires when the `open`/`closed` state of a `<details>` element is toggled.

This event is not cancelable and does not bubble.

**Note:** The `toggle` event is also available in a different form on `HTMLElement`; this version fires on popover elements just after they are shown or hidden. See the `HTMLElement` `toggle event` page for more information.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

This example logs chapters that are open. Chapters are removed from the log when they are closed.

### HTML


```html
<aside id="log">
  <p>Open chapters:</p>
  <div data-id="ch1" hidden>I</div>
  <div data-id="ch2" hidden>II</div>
  <div data-id="ch3" hidden>III</div>
</aside>
<section id="summaries">
  <p>Chapter summaries:</p>
  <details id="ch1">
    <summary>Chapter I</summary>
    Philosophy reproves Boethius for the foolishness of his complaints against
    Fortune. Her very nature is caprice.
  </details>
  <details id="ch2">
    <summary>Chapter II</summary>
    Philosophy in Fortune's name replies to Boethius' reproaches, and proves
    that the gifts of Fortune are hers to give and to take away.
  </details>
  <details id="ch3">
    <summary>Chapter III</summary>
    Boethius falls back upon his present sense of misery. Philosophy reminds him
    of the brilliancy of his former fortunes.
  </details>
</section>
```

### CSS


```css
body {
  display: flex;
  flex-direction: row-reverse;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}
```

### JavaScript


```js
function logItem(e) {
  const item = document.querySelector(`[data-id=${e.target.id}]`);
  item.toggleAttribute("hidden");
}

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);
});
```

### Result

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

| Specification |
| --- |
| HTML Standard # event-toggle |

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

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

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

 The **`label`** property of the
 `GPUBuffer` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createBuffer()` call, or you can get and set it directly on the `GPUBuffer` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUBuffer.label`:


```js
const output = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
});

output.label = "mybuffer";

console.log(output.label); // "mybuffer"
```


Setting a label via the originating `GPUDevice.createBuffer()` call, and then getting it via `GPUBuffer.label`:


```js
const output = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
  label: "mybuffer",
});

console.log(output.label); // "mybuffer"
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
GPUBuffer: unmap() method
=========================

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

 The **`unmap()`** method of the
 `GPUBuffer` interface unmaps the mapped range of the `GPUBuffer`, making its contents available for use by the GPU again after it has previously been mapped with `GPUBuffer.mapAsync()` (the GPU cannot access a mapped `GPUBuffer`).

When `unmap()` is called, any `ArrayBuffer`s created via `GPUBuffer.getMappedRange()` are detached.

Syntax
------


```js
unmap()
```

### Parameters

None.

### Return value

None (`Undefined`).

Examples
--------

See the main `GPUBuffer` page for an example.

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

| Specification |
| --- |
| WebGPU # dom-gpubuffer-unmap |

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

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

See also
--------

* The WebGPU API
GPUBuffer: size property
========================

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

 The **`size`** read-only property of the
 `GPUBuffer` interface represents the length of the `GPUBuffer`'s memory allocation, in bytes.

`size` is set via the `size` property in the descriptor object passed into the originating `GPUDevice.createBuffer()` call.

Value
-----

A number.

Examples
--------


```js
// Define global buffer size
const BUFFER\_SIZE = 1000;

// ...

const output = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
});

console.log(output.size); // 1000
```

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

| Specification |
| --- |
| WebGPU # dom-gpubuffer-size |

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

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

See also
--------

* The WebGPU API
GPUBuffer: mapState property
============================

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

 The **`mapState`** read-only property of the
 `GPUBuffer` interface represents the mapped state of the `GPUBuffer`.

Value
-----

An enumerated value. Possible values are:

`unmapped`

The buffer is not mapped. `GPUBuffer.getMappedRange()` cannot be used to access the contents of the `GPUBuffer` in JavaScript. This could be because:

* `GPUBuffer.mapAsync()` has not yet been called.
* The `GPUBuffer` was previously mapped, and then unmapped again with `GPUBuffer.unmap()`.

`pending`

The buffer is not yet mapped. `GPUBuffer.mapAsync()` has been called, but its `Promise` is currently pending. `GPUBuffer.getMappedRange()` cannot currently be used to access the contents of the `GPUBuffer` in JavaScript.

`mapped`

The buffer is mapped. The `GPUBuffer.mapAsync()` `Promise` has fulfilled, and `GPUBuffer.getMappedRange()` can now be used to access the contents of the `GPUBuffer` in JavaScript.

Examples
--------


```js
const stagingBuffer = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.MAP\_READ | GPUBufferUsage.COPY\_DST,
});

console.log(stagingBuffer.mapState); // "unmapped"

// ...

await stagingBuffer.mapAsync(
  GPUMapMode.READ,
  0, // Offset
  BUFFER\_SIZE, // Length
);

console.log(stagingBuffer.mapState); // "mapped"
```

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

| Specification |
| --- |
| WebGPU # dom-gpubuffer-mapstate |

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

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

See also
--------

* The WebGPU API