recursal/MDN huggingface dataset:
GPURenderPassEncoder: drawIndexedIndirect() method
==================================================

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

 The **`drawIndexedIndirect()`** method of the
 `GPURenderPassEncoder` interface draws indexed primitives using parameters read from a `GPUBuffer`.

Syntax
------


```js
drawIndexedIndirect(indirectBuffer, indirectOffset)
```

### Parameters

`indirectBuffer`

A `GPUBuffer` containing the `indexCount`, `instanceCount`, `firstIndex`, `baseVertex`, and `firstInstance` values needed to carry out the drawing operation. The buffer must contain a tightly packed block of five 32-bit unsigned integer values representing the values (20 bytes total), given in the same order as the arguments for `GPURenderPassEncoder.drawIndexed()`. So for example:


```js
const uint32 = new Uint32Array(5);
uint32[0] = 3; // The indexCount value
uint32[1] = 1; // The instanceCount value
uint32[2] = 0; // The firstIndex value
uint32[3] = 0; // The baseVertex value
uint32[4] = 0; // The firstInstance value

// Write values into a GPUBuffer
device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length);
```


`indirectOffset`

The offset, in bytes, into `indirectBuffer` where the value data begins.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`drawIndirect()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* `indirectBuffer`'s `GPUBuffer.usage` contains the `GPUBufferUsage.INDIRECT` flag.
* `indirectOffset` + the total size specified by the value parameters in the `indirectBuffer` is less than or equal to the `indirectBuffer`'s `GPUBuffer.size`.
* `indirectOffset` is a multiple of 4.
Examples
--------


```js
// ...

// Create GPURenderPassEncoder
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Set pipeline and vertex buffer
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.setIndexBuffer(indexBuffer, "uint16");

// Create drawIndexedIndirect values
const uint32 = new Uint32Array(5);
uint32[0] = 3;
uint32[1] = 1;
uint32[2] = 0;
uint32[3] = 0;
uint32[4] = 0;

// Create a GPUBuffer and write the draw values into it
const drawValues = device.createBuffer({
  size: 20,
  usage: GPUBufferUsage.COPY\_DST | GPUBufferUsage.INDIRECT,
});
device.queue.writeBuffer(drawValues, 0, uint32, 0, uint32.length);

// Draw the vertices
passEncoder.drawIndexedIndirect(drawValues, 0);

// End the render pass
passEncoder.end();

// End frame by passing array of GPUCommandBuffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-drawindexedindirect |

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

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

See also
--------

* The WebGPU API
GPURenderPassEncoder: setPipeline() method
==========================================

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

 The **`setPipeline()`** method of the
 `GPURenderPassEncoder` interface sets the `GPURenderPipeline` to use for subsequent render pass commands.

Syntax
------


```js
setPipeline(pipeline)
```

### Parameters

`pipeline`

The `GPURenderPipeline` to use for subsequent render pass commands.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`setPipeline()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* If the `GPURenderPipeline` writes to the depth component of the depth/stencil attachment, `depthReadOnly` (as specified in the descriptor of the originating `GPUCommandEncoder.beginRenderPass()` call) is `true`.
* If the `GPURenderPipeline` writes to the stencil component of the depth/stencil attachment, `stencilReadOnly` (as specified in the descriptor of the originating `GPUCommandEncoder.beginRenderPass()` call) is `true`.
Examples
--------

In our basic render demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPURenderPassEncoder` created via `GPUCommandEncoder.beginRenderPass()`. `setPipeline()` is called in an appropriate place to set the render pipeline.


```js
// ...

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

// Create GPUCommandEncoder to issue commands to the GPU
// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-setpipeline |

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

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

See also
--------

* The WebGPU API
BluetoothRemoteGATTService: getCharacteristic() method
======================================================

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

 The **`BluetoothGATTService.getCharacteristic()`** method
 returns a `Promise` to an instance of
 `BluetoothRemoteGATTCharacteristic` for a given universally unique identifier
 (UUID).

Syntax
------


```js
getCharacteristic(characteristic)
```

### Parameters

`characteristic`

 The UUID of a characteristic, for
 example `'00002a37-0000-1000-8000-00805f9b34fb'` for the Heart Rate
 Measurement characteristic.


### Return value

A `Promise` to an instance of `BluetoothRemoteGATTCharacteristic`

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-getcharacteristic |

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

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

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

 The **`BluetoothGATTService.device`** read-only property
 returns information about a Bluetooth device through an instance of
 `BluetoothDevice`.

Value
-----

An instance of `BluetoothDevice`.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-device |

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

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

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

 The **`BluetoothGATTService.isPrimary`** read-only property
 returns a boolean value that indicates whether this is a primary service. If it
 is not a primary service, it is a secondary service.

Value
-----

A boolean value.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-isprimary |

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

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

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

 The **`BluetoothGATTService.getCharacteristics()`** method
 returns a `Promise` to a list of `BluetoothRemoteGATTCharacteristic`
 instances for a given universally unique identifier (UUID).

Syntax
------


```js
getCharacteristics(characteristics)
```

### Parameters

`characteristics`

 The UUID of a characteristic, for
 example `'00002a37-0000-1000-8000-00805f9b34fb'` for the Heart Rate
 Measurement characteristic.


### Return value

 A `Promise` to an
 `Array` of `BluetoothRemoteGATTCharacteristic` instances.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-getcharacteristics |

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

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

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

 The **`BluetoothGATTService.uuid`** read-only property
 returns a string representing the UUID of this service.

Value
-----

A string.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-uuid |

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

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

The **`HTMLInputElement.files`** property allows you to access the `FileList` selected with the `<input type="file">` element.

Value
-----

A `FileList` object listing the selected files, if any, or `null` if the **`HTMLInputElement`** is not of `type="file"`.

Examples
--------

The example below shows how you can access the **`HTMLInputElement.files`** property and log the name, date modified, size, and type of each file selected by the user.

### HTML


```html
<input id="files" type="file" multiple />
```

### JavaScript

 Note that **`HTMLInputElement.files`** still returns an instance of `FileList` even if no files are
 selected.
 Therefore it's safe to iterate through it with `for...of` without checking if any files are selected.


```js
const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // true even if empty

for (const file of fileInput.files) {
  console.log(file.name); // prints file name
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // prints legible date
  console.log(
    file.size < 1000 ? file.size : Math.round(file.size / 1000) + "KB",
  );
  console.log(file.type); // prints MIME type
}
```

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

| Specification |
| --- |
| HTML Standard # dom-input-files-dev |

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

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

See also
--------

* `DataTransfer.files`
HTMLInputElement: webkitEntries property
========================================

 The read-only **`webkitEntries`**
 property of the `HTMLInputElement` interface contains an array of file
 system entries (as objects based on `FileSystemEntry`) representing files
 and/or directories selected by the user using an `<input>` element of
 type `file`, but only if that selection was made using drag-and-drop:
 selecting a file in the dialog will leave the property empty.

 The array can only contain directories if the
 `webkitdirectory` property is
 `true`. This means the `<input>` element was configured to
 let the user choose directories.


**Note:** This property is called `webkitEntries` in the specification due to its
 origins as a Google Chrome-specific API. It's likely to be renamed someday.


Value
-----

 An array of objects based on `FileSystemEntry`, each representing one file
 which is selected in the `<input>` element. More specifically, files are
 represented by `FileSystemFileEntry` objects, and, if they're allowed,
 directories are represented by `FileSystemDirectoryEntry` objects.

Examples
--------

 This example shows how to create a file selection `<input>` element
 and process the selected files.

### HTML


```html
<input id="files" type="file" multiple />
```

### JavaScript


```js
document.getElementById("files").addEventListener("change", (event) => {
  event.target.webkitEntries.forEach((entry) => {
    /\* do stuff with the entry \*/
  });
});
```


 Each time a `change` event occurs, this code iterates over the selected
 files, obtaining their `FileSystemEntry`-based objects and acting on them.

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

| Specification |
| --- |
| File and Directory Entries API # dom-htmlinputelement-webkitentries |

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
* `HTMLInputElement`
* `FileSystemEntry`
* `FileSystem`
HTMLInputElement: checkValidity() method
========================================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`HTMLInputElement.checkValidity()`** method returns a boolean value which indicates validity of the value of the element. If the value is invalid, this method also fires the `invalid` event on the element.

Syntax
------


```js
checkValidity()
```

### Parameters

None.

### Return value

Returns `true` if the value of the element has no validity problems; otherwise returns `false`.

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

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

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

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

See also
--------

* reportValidity
* Learn: Client-side form validation
* Guide: Constraint validation
HTMLInputElement: selectionchange event
=======================================

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

 The **`selectionchange`** event of the Selection API is fired when the text selection within an `<input>` element is changed.
 This includes both changes in the selected range of characters, or if the caret moves.

This event is not cancelable.

The event is usually processed by adding an event listener on the `<input>`, and in the handler function read by the `HTMLInputElement` `selectionStart`, `selectionEnd` and `selectionDirection` properties.

It is also possible to add a listener on the `onselectionchange` event handler, and within the handler function use `Document.getSelection()` to get the `Selection`. However this is not very useful for getting changes to *text* selections.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

The example below shows how to get the text selected in an `<input>` element.

### HTML


```html
<div>
  Enter and select text here:<br /><input id="mytext" rows="2" cols="20" />
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>
```

### JavaScript


```js
const myinput = document.getElementById("mytext");

myinput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myinput.selectionStart;
  document.getElementById("end").textContent = myinput.selectionEnd;
  document.getElementById("direction").textContent = myinput.selectionDirection;
});
```

### Result

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

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

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

 The **`HTMLInputElement.setRangeText()`** method replaces a
 range of text in an `<input>` or `<textarea>` element with
 a new string.

Syntax
------


```js
setRangeText(replacement)
setRangeText(replacement, start)
setRangeText(replacement, start, end)
setRangeText(replacement, start, end, selectMode)
```

### Parameters

`replacement`

The string to insert.

`start` Optional

 The 0-based index of the first character to replace. Defaults to the current
 `selectionStart` value (the start of the user's current selection).


`end` Optional

 The 0-based index of the character *after* the last character to replace.
 Defaults to the current `selectionEnd` value (the end of the user's current
 selection).


`selectMode` Optional

 A string defining how the selection should be set after the text has been replaced.
 Possible values:


* `"select"` selects the newly inserted text.
* `"start"`moves the selection to just before the inserted text.
* `"end"` moves the selection to just after the inserted text.
* `"preserve"` attempts to preserve the selection. This is the default.

### Return value

None (`undefined`).

Examples
--------

 Click the button in this example to replace part of the text in the text box. The newly
 inserted text will be highlighted (selected) afterwards.

### HTML


```html
<input
 type="text"
 id="text-box"
 size="30"
 value="This text has NOT been updated." />
<button onclick="selectText()">Update text</button>
```

### JavaScript


```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setRangeText("ALREADY", 14, 17, "select");
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-textarea/input-setrangetext-dev |

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

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

See also
--------

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `Selection`
HTMLInputElement: multiple property
===================================

The **`HTMLInputElement.multiple`** property indicates if an input can have more than one value. Firefox currently only supports `multiple` for `<input type="file">`.

Value
-----

A boolean value.

Examples
--------


```js
// fileInput is a <input type=file multiple>
let fileInput = document.getElementById("myfileinput");

if (fileInput.multiple) {
  // Loop fileInput.files
  for (const file of fileInput.files) {
    // Perform action on one file
  }
  // Only one file available
} else {
  let [file] = fileInput.files;
}
```

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

| Specification |
| --- |
| HTML Standard # dom-input-multiple |

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

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

See also
--------

* FileList
* Bug 523771 - Support <input type=file multiple>
HTMLInputElement: setSelectionRange() method
============================================

 The **`HTMLInputElement.setSelectionRange()`** method sets the
 start and end positions of the current text selection in an `<input>`
 or `<textarea>` element.

 Optionally, in newer browser versions, you can specify the direction in which selection
 should be considered to have occurred. This lets you indicate, for example, that the
 selection was set by the user clicking and dragging from the end of the selected text
 toward the beginning.

 This method updates the `HTMLInputElement.selectionStart`,
 `selectionEnd`, and `selectionDirection` properties in one call.

 Note that according to the WHATWG forms spec `selectionStart`, `selectionEnd` properties and
 `setSelectionRange` method apply only to inputs of types text, search, URL,
 tel and password. Chrome, starting from version 33, throws an exception while accessing
 those properties and method on the rest of input types. For example, on input of type
 number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input
 element's type ('number') does not support selection".

 If you wish to select **all** text of an input element, you can use the HTMLInputElement.select()
 method instead.

Syntax
------


```js
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
```

### Parameters

 If `selectionEnd` is less than `selectionStart`, then both are
 treated as the value of `selectionEnd`.

`selectionStart`

 The 0-based index of the first selected character. An index greater than the length
 of the element's value is treated as pointing to the end of the value.


`selectionEnd`

 The 0-based index of the character *after* the last selected character. An
 index greater than the length of the element's value is treated as pointing to the end
 of the value.


`selectionDirection` Optional

 A string indicating the direction in which the selection is considered to have been
 performed. Possible values:


* `"forward"`
* `"backward"`
* `"none"` if the direction is unknown or irrelevant. Default value.

### Return value

None (`undefined`).

Examples
--------

 Click the button in this example to select the third, fourth, and fifth characters in
 the text box ("zil" in the word "Mozilla").

### HTML


```html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">Select text</button>
```

### JavaScript


```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-textarea/input-setselectionrange-dev |

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

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

See also
--------

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `Selection`
HTMLInputElement: reportValidity() method
=========================================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`reportValidity()`** method of the `HTMLInputElement` interface performs the same validity checking steps as the `checkValidity()` method. If the value is invalid, this method also fires the `invalid` event on the element, and (if the event isn't canceled) reports the problem to the user.

Syntax
------


```js
reportValidity()
```

### Parameters

None.

### Return value

Returns `true` if the element's value has no validity problems; otherwise, returns `false`.

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

| Specification |
| --- |
| HTML Standard # dom-cva-reportvalidity-dev |

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

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

See also
--------

* checkValidity
* Learn: Client-side form validation
* Guide: Constraint validation