recursal/MDN huggingface dataset:
FederatedCredential: FederatedCredential() constructor
======================================================

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

 The **`FederatedCredential()`**
 constructor creates a new `FederatedCredential` object. In
 supporting browsers, an instance of this class may be passed the `credential`
 received from the `init` object for global `fetch()`.

Syntax
------


```js
new FederatedCredential(init)
```

### Parameters

`init`

Options are:

`provider`

 A string; identifying the credential
 provider.



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

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-federatedcredential |

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

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

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

 The **`provider`** property of the
 `FederatedCredential` interface returns a string
 containing a credential's federated identity provider.

Value
-----

A string containing a credential's federated identity provider.

Examples
--------


```js
// TBD
```

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

| Specification |
| --- |
| Credential Management Level 1 # dom-federatedcredential-provider |

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

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

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

The **`getTitlebarAreaRect()`** method of the `WindowControlsOverlay` interface queries the current geometry of the title bar area of the Progressive Web App window.

This only applies to Progressive Web Apps installed on desktop operating systems and which use the Window Controls Overlay API.

Syntax
------


```js
getTitlebarAreaRect()
```

### Parameters

None.

### Return value

A `DOMRect` that provides the coordinates and size of the title bar area within the app's content.

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

| Specification |
| --- |
| Window Controls Overlay # the-gettitlebararearect-method |

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

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

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

The **`visible`** read-only property of the `WindowControlsOverlay` interface returns a Boolean that indicates whether the window controls overlay is visible or not.

The window controls overlay is not be visible if:

* The Web App Manifest's `display_override` member is not set to `window-controls-overlay`.
* Or, if the user has opted-out of the feature.
Value
-----

A boolean.

Examples
--------


```js
if (navigator.windowControlsOverlay.visible) {
  // Execute code if the controls overlay is visible.
} else {
  // Do something else when it isn't visible.
}
```

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

| Specification |
| --- |
| Window Controls Overlay # the-visible-attribute |

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

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

See also
--------

* The `WindowControlsOverlay` interface it belongs to.
WindowControlsOverlay: geometrychange event
===========================================

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

The `geometrychange` event is fired when the position, size, or visibility of a Progressive Web App's title bar area changes.

This only applies to Progressive Web Apps installed on desktop operating systems and use the Window Controls Overlay API.

Syntax
------

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


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

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

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

A `WindowControlsOverlayGeometryChangeEvent`. Inherits from `Event`.

Event

WindowControlsOverlayGeometryChangeEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`titlebarAreaRect`

A `DOMRect` representing the position and size of the title bar area within the app's content.

`visible`

A Boolean that indicates whether the window controls overlay is visible or not.

Examples
--------

Using `addEventListener()`:


```js
navigator.windowControlsOverlay.addEventListener("geometrychange", (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
});
```


Using the `ongeometrychange` event handler property:


```js
navigator.windowControlsOverlay.ongeometrychange = (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
};
```

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

| Specification |
| --- |
| Window Controls Overlay # the-ongeometrychange-attribute |

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

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

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

The **`FileReader()`** constructor creates a new FileReader.

For details about how to use `FileReader`, see Using files from web applications.

Syntax
------


```js
new FileReader()
```

### Parameters

None.

Examples
--------

The following code snippet shows creation of a `FileReader` object using the `FileReader()` constructor and subsequent usage of the object:


```js
function printFile(file) {
  const reader = new FileReader();
  reader.onload = (evt) => {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}
```

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

| Specification |
| --- |
| File API # filereaderConstrctr |

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

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

See also
--------

* Using files from web applications
FileReader: readAsText() method
===============================

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

 The **`readAsText()`** method of the `FileReader` interface is used to read the contents of the specified `Blob` or `File`.
 When the read operation is complete, the `readyState` is changed to `DONE`,
 the `loadend` event is triggered, and the `result` property contains the contents of the file as a text string.

**Note:** The `Blob.text()` method is a newer promise-based API to read a file as text.

**Note:** This method loads the entire file's content into memory and is not suitable for large files. Prefer `readAsArrayBuffer()` for large files.

Syntax
------


```js
readAsText(blob)
readAsText(blob, encoding)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

`encoding` Optional

A string specifying the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.

### Return value

None (`undefined`).

Examples
--------

### HTML


```html
<input type="file" onchange="previewFile()" /><br />
<p class="content"></p>
```

### JavaScript


```js
function previewFile() {
  const content = document.querySelector(".content");
  const [file] = document.querySelector("input[type=file]").files;
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // this will then display a text file
      content.innerText = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsText(file);
  }
}
```

### Result

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

| Specification |
| --- |
| File API # readAsDataText |

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

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

See also
--------

* `FileReader`
FileReader: error event
=======================

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

The **`error`** event is fired when the read failed due to an error (for example, because the file was not found or not readable).

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("error", (event) => {});

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ProgressEvent.lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`ProgressEvent.loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`ProgressEvent.total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------


```js
const fileInput = document.querySelector('input[type="file"]');
const reader = new FileReader();

function handleSelected(e) {
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    reader.addEventListener("error", () => {
      console.error(`Error occurred reading file: ${selectedFile.name}`);
    });

    reader.addEventListener("load", () => {
      console.log(`File: ${selectedFile.name} read successfully`);
    });

    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

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

| Specification |
| --- |
| File API # dfn-error-event |
| File API # dfn-onerror |

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

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

See also
--------

* Related events: `loadstart`, `loadend`, `progress`, `load`, `abort`
FileReader: readAsDataURL() method
==================================

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

 The **`readAsDataURL`** method of the `FileReader` interface is used to read the contents of the specified
 `Blob` or `File`. When the read operation is finished, the
 `readyState` becomes `DONE`, and the
 `loadend` is triggered. At that time, the
 `result` attribute contains the data as a data: URL representing the
 file's data as a base64 encoded string.


**Note:** The blob's `result` cannot be
 directly decoded as Base64 without first removing the Data-URL declaration preceding
 the Base64-encoded data. To retrieve only the Base64 encoded string, first
 remove `data:*/*;base64,` from the result.


Syntax
------


```js
readAsDataURL(blob)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

### Return value

None (`undefined`).

Examples
--------

### Reading a single file

#### HTML


```html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview" />
```


#### JavaScript


```js
function previewFile() {
  const preview = document.querySelector("img");
  const file = document.querySelector("input[type=file]").files[0];
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // convert image file to base64 string
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}
```


#### Result

### Reading multiple files

#### HTML


```html
<input id="browse" type="file" multiple />
<div id="preview"></div>
```


#### JavaScript


```js
function previewFiles() {
  const preview = document.querySelector("#preview");
  const files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // Make sure `file.name` matches our extensions criteria
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      const reader = new FileReader();

      reader.addEventListener(
        "load",
        () => {
          const image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = reader.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    Array.prototype.forEach.call(files, readAndPreview);
  }
}

const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
```


#### Result

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

| Specification |
| --- |
| File API # readAsDataURL |

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

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

See also
--------

* `FileReader`
* `URL.createObjectURL()`
FileReader: readAsBinaryString() method
=======================================

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

**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.

**Note:** This method is deprecated in favor of `readAsArrayBuffer()`.

 The **`readAsBinaryString`** method of the `FileReader` interface is used to start reading the contents of the
 specified `Blob` or `File`. When the read operation is
 finished, the `readyState` becomes
 `DONE`, and the `FileReader.loadend_event` is triggered. At that time, the
 `result` attribute contains the raw binary data from
 the file.

 Note that this method was once removed from the File API specification, but
 re-introduced for backward compatibility.
 Using `FileReader.readAsArrayBuffer()` is recommended.

Syntax
------


```js
readAsBinaryString(blob)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

### Return value

None (`undefined`).

Examples
--------


```js
const canvas = document.createElement("canvas");
const height = 200;
const width = 200;

canvas.width = width;
canvas.height = height;

const ctx = canvas.getContext("2d");

ctx.strokeStyle = "#090";
ctx.beginPath();
ctx.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI \* 2);
ctx.stroke();

canvas.toBlob((blob) => {
  const reader = new FileReader();

  reader.onload = () => {
    console.log(reader.result);
  };

  reader.readAsBinaryString(blob);
});
```

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

| Specification |
| --- |
| File API # readAsBinaryString |

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

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

See also
--------

* `FileReader`
FileReader: readAsArrayBuffer() method
======================================

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

 The **`readAsArrayBuffer()`** method of the `FileReader` interface is used to start reading the
 contents of a specified `Blob` or `File`. When the read
 operation is finished, the `readyState` becomes
 `DONE`, and the `loadend` is
 triggered. At that time, the `result` attribute
 contains an `ArrayBuffer` representing the file's data.


**Note:** The `Blob.arrayBuffer()` method is a newer promise-based API to read a
 file as an array buffer.


Syntax
------


```js
readAsArrayBuffer(blob)
```

### Parameters

`blob`

The `Blob` or `File` from which to read.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| File API # readAsArrayBuffer |

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

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

See also
--------

* `FileReader`
FileReader: abort() method
==========================

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

 The **`abort`** method of the `FileReader` interface aborts the read operation. Upon return,
 the `readyState` will be `DONE`.

Syntax
------


```js
abort()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| File API # abort |

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

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

See also
--------

* `FileReader`
FileReader: readyState property
===============================

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

The **`readyState`** read-only property of the `FileReader` interface provides the current state of the reading operation a `FileReader` is in. A `FileReader` exists in one of the following states:

| Value | State | Description |
| --- | --- | --- |
| `0` | `EMPTY` | Reader has been created. None of the read methods called yet. |
| `1` | `LOADING` | A read method has been called. |
| `2` | `DONE` | The operation is complete. |

`EMPTY`

The `FileReader` has been created, but no readAs method was called yet.

`LOADING`

A readAs method was invoked. A `File` or `Blob` is being read, and no error has occurred yet.

`DONE`

The read operation is complete. This could mean that: the entire `File` or `Blob` has been read into memory, a file read error occurred, or `abort()` was called and the read was cancelled.

Examples
--------


```js
const reader = new FileReader();
console.log("EMPTY", reader.readyState); // readyState will be 0

reader.readAsText(blob);
console.log("LOADING", reader.readyState); // readyState will be 1

reader.onloadend = () => {
  console.log("DONE", reader.readyState); // readyState will be 2
};
```

Value
-----

A number which is one of the three possible state constants define for the `FileReader` API.

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

| Specification |
| --- |
| File API # dom-filereader-readystate |

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

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

See also
--------

* `Blob`
FileReader: error property
==========================

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

 The **`error`** read-only property of the `FileReader` interface returns the
 error that occurred while reading the file.

Value
-----

A `DOMException` containing the relevant error.

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

| Specification |
| --- |
| File API # dom-filereader-error |

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

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

See also
--------

* `FileReader`
XRCylinderLayer: transform property
===================================

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

The **`transform`** property of the `XRCylinderLayer` interface represents the offset and orientation relative to the layer's `space`.

Value
-----

An `XRRigidTransform`.

Examples
--------

### Setting the cylinder layer's position

This example code positions the layer two meters away from the origin of `xrReferenceSpace`.


```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

cylinderLayer.transform = new XRRigidTransform({ z: -2 });
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-transform |

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

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

See also
--------

* `XRRigidTransform`
* `XRCylinderLayer.space`
XRCylinderLayer: radius property
================================

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

The **`radius`** property of the `XRCylinderLayer` interface represents the radius of the cylinder.

Value
-----

A number representing the radius of the cylinder.

Examples
--------

### Getting a layer's radius

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and allows to specify a `radius`. The `XRCylinder.radius` property can be used after layer creation to get the radius used or to set it to a new one.


```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralAngle: (60 \* Math.PI) / 180,
  aspectRatio: 2,
  radius: 2,
  transform: new XRRigidTransform(/\* … \*/),
});

cylinderLayer.radius; // 2
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-radius |

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

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

See also
--------

* `XRCylinderLayer.aspectRatio`
* `XRCylinderLayer.centralAngle`
* `Math.PI`
XRCylinderLayer: centralAngle property
======================================

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

The **`centralAngle`** property of the `XRCylinderLayer` interface represents the angle in radians of the visible section of the cylinder.

Value
-----

A number representing the angle in radians of the visible section of the cylinder.

Examples
--------

### Getting a layer's central angle

The `XRWebGLBinding.createCylinderLayer()` method creates a cylinder layer and allows to specify a `centralAngle`. The `XRCylinder.centralAngle` property can be used after layer creation to get the central angle used or to set it to a new one.


```js
const cylinderLayer = xrGlBinding.createCylinderLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralAngle: (60 \* Math.PI) / 180,
  aspectRatio: 2,
  radius: 2,
  transform: new XRRigidTransform(/\* … \*/),
});

cylinderLayer.centralAngle; // 1.0471975511965976
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrcylinderlayer-centralangle |

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

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

See also
--------

* `XRCylinderLayer.aspectRatio`
* `XRCylinderLayer.radius`
* `Math.PI`