recursal/MDN huggingface dataset:
SVGMaskElement: x property
==========================

The read-only **`x`** property of the `SVGMaskElement` interface returns an `SVGAnimatedLength` object containing the value of the `x` attribute of the `<mask>`. It represents the x-axis coordinate of the *top-left* corner of the masking area.

**Note:** Although this property is read-only, it is merely a container for two values you can modify, `baseVal` and `animVal`.

Value
-----

An `SVGAnimatedLength` object in the coordinate system defined by `SVGMaskElement.maskUnits`. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the initial `x` value.

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="-10 -10 120 120" width="100" height="100">
    <mask id="mask" x="0" maskUnits="userSpaceOnUse">
      <!-- Everything under a white pixel will be visible -->
      <rect x="0" y="0" width="100" height="100" fill="white" />

      <!-- Everything under a black pixel will be invisible -->
      <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
      <animate
 attributeName="x"
 values="0;80;0"
 dur="5s"
 repeatCount="indefinite" />
    </mask>

    <polygon points="-10,110 110,110 110,-10" fill="orange" />

    <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
    <circle cx="50" cy="50" r="50" mask="url(#mask)" />
  </svg>
</div>
<pre id="log"></pre>
```



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

function displayLog() {
  const animValue = mask.x.animVal.value;
  const baseValue = mask.x.baseVal.value;
  log.textContent = `The 'x.animVal' is ${animValue}.\n`;
  log.textContent += `The 'x.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}
displayLog();
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # dom-svgmaskelement-x |

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

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

The read-only **`y`** property of the `SVGMaskElement` interface returns an `SVGAnimatedLength` object containing the value of the `y` attribute of the `<marker>`. It represents the y-axis coordinate of the *top-left* corner of the masking area.

**Note:** Although this property is read-only, it is merely a container for two values you can modify, `baseVal` and `animVal`.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `y` value.

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="-10 -10 120 120" width="100" height="100">
    <mask id="mask" x="0" maskUnits="userSpaceOnUse">
      <!-- Everything under a white pixel will be visible -->
      <rect x="0" y="0" width="100" height="100" fill="white" />

      <!-- Everything under a black pixel will be invisible -->
      <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
      <animate
 attributeName="y"
 values="0;80;0"
 dur="5s"
 repeatCount="indefinite" />
    </mask>

    <polygon points="-10,110 110,110 110,-10" fill="orange" />

    <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
    <circle cx="50" cy="50" r="50" mask="url(#mask)" />
  </svg>
</div>
<pre id="log"></pre>
```



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

function displayLog() {
  const animValue = mask.y.animVal.value;
  const baseValue = mask.y.baseVal.value;
  log.textContent = `The 'y.animVal' is ${animValue}.\n`;
  log.textContent += `The 'y.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}
displayLog();
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # dom-svgmaskelement-y |

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

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

The read-only **`height`** property of the `SVGMaskElement` interface returns an `SVGAnimatedLength` object containing the value of the `height` attribute of the `<marker>`.

**Note:** Although this property is read-only, it is merely a container for two values you can modify, `baseVal` and `animVal`.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `height` value.

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="-10 -10 120 120" width="100" height="100">
    <mask id="mask" x="0" maskUnits="objectBoundingBox">
      <!-- Everything under a white pixel will be visible -->
      <rect x="0" y="0" width="100" height="100" fill="white" />

      <!-- Everything under a black pixel will be invisible -->
      <path
 d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
 fill="black" />
      <animate
 attributeName="height"
 values="144;0;144"
 dur="5s"
 repeatCount="indefinite" />
    </mask>

    <polygon points="-10,110 110,110 110,-10" fill="orange" />

    <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
    <circle cx="50" cy="50" r="50" mask="url(#mask)" />
  </svg>
</div>
<pre id="log"></pre>
```



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

function displayLog() {
  const animValue = mask.height.animVal.value;
  const baseValue = mask.height.baseVal.value;
  log.textContent = `The 'height.animVal' is ${animValue}.\n`;
  log.textContent += `The 'height.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}
displayLog();
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # dom-svgmaskelement-height |

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

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

The `target` property of the `HTMLBaseElement` interface is a string that represents the default target tab to show the resulting output for hyperlinks and form elements.

It reflects the `target` attribute of the `<base>` element.

Value
-----

A string representing the target. Its value can be:

* The name of a `<frame>`.
* One of the keyword with specific values:`_blank`, `_self`, `_parent`, or `_top`.
Example
-------


```html
<head>
  <base target="\_top" />
</head>
```



```js
const baseElement = document.getElementsByTagName("base")[0];
console.log(baseElement.target); // Output: '\_top'
```

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

| Specification |
| --- |
| HTML Standard # dom-base-target |

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

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

See also
--------

* `HTMLAnchorElement.target` property
* `HTMLAreaElement.target` property
* `HTMLFormElement.target` property
CSSPerspective: length property
===============================

 The **`length`** property of the
 `CSSPerspective` interface sets the distance from z=0.

 It is used to apply a perspective transform to the element and its content. If the
 value is 0 or a negative number, no perspective transform is applied.

Value
-----

A `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssperspective-length |

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

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

 The **`CSSPerspective()`** constructor creates
 a new `CSSPerspective` object representing the perspective() value of
 the individual `transform` property in CSS.

Syntax
------


```js
new CSSPerspective(length)
```

### Parameters

`length`

 A value for the distance from z=0 of the `CSSPerspective` object to be
 constructed. This must be a `<length>`.


### Exceptions

`TypeError`

 Raised if the value of `CSSPerspective.length` exists but is not a
 `<length>`.


Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssperspective-cssperspective |

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

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

 The **`SharedWorker()`** constructor creates a
 `SharedWorker` object that executes the script at the specified URL. This
 script must obey the same-origin policy.


**Note:** there is disagreement among browser manufacturers about
 whether a data URL is of the same origin or not. Although Firefox 10.0
 and later accept data URLs, that's not the case in all other
 browsers.


Syntax
------


```js
new SharedWorker(aURL)
new SharedWorker(aURL, name)
new SharedWorker(aURL, options)
```

### Parameters

`aURL`

 A string representing the URL of the script the worker will
 execute. It must obey the same-origin policy.


`name` Optional

 A string specifying an identifying name for the
 `SharedWorkerGlobalScope` representing the scope of the worker, which is useful for creating new instances of the same SharedWorker and debugging.


`options` Optional

 An object containing option properties that can set when creating the object
 instance. Available properties are as follows:


`type`

 A string specifying the type of worker to
 create. The value can be `classic` or `module`. If not
 specified, the default used is `classic`.


`credentials`

 A string specifying the type of
 credentials to use for the worker. The value can be `omit`,
 `same-origin`, or *`include`. If not
specified, or if type is `classic`, the default used is
`omit` (no credentials required).*

`name`

 A string specifying an
 identifying name for the `SharedWorkerGlobalScope` representing the
 scope of the worker, which is mainly useful for debugging purposes.



### Exceptions

`SecurityError` `DOMException`

Thrown if the document is not allowed to start workers, for example if the URL has an invalid syntax or if the same-origin policy is violated.

`NetworkError` `DOMException`

Thrown if the MIME type of the worker script is incorrect. It should *always* be `text/javascript` (for historical reasons other JavaScript MIME types may be accepted).

`SyntaxError` `DOMException`

Thrown if `aURL` cannot be parsed.

Examples
--------

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


```js
const myWorker = new SharedWorker("worker.js");

myWorker.port.start();

first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```


For a full example, see our Basic shared worker example (run shared worker.)

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

| Specification |
| --- |
| HTML Standard # dom-sharedworker-dev |

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

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

See also
--------

* The `SharedWorker` interface it belongs to.
SharedWorker: error event
=========================

The **`error`** event of the `SharedWorker` interface fires when an error occurs in the worker.

Syntax
------

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


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

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

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

A generic `Event`.

Example
-------

The following code snippet creates a `SharedWorker` object using the `SharedWorker()` constructor and sets up an `onerror` handler on the resulting object:


```js
const mySharedWorker = new SharedWorker("shared-worker.js");

mySharedWorker.onerror = (event) => {
  console.error("There is an error with your worker!");
};
```

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

| Specification |
| --- |
| HTML Standard # handler-abstractworker-onerror |

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

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

 The **`port`** property of the `SharedWorker`
 interface returns a `MessagePort` object used to communicate and control
 the shared worker.

Value
-----

A `MessagePort` object.

Examples
--------

 The following code snippet shows creation of a `SharedWorker` object using
 the `SharedWorker()` constructor. Multiple
 scripts can then access the worker through a `MessagePort` object accessed
 using the `SharedWorker.port` property — the port is started using its
 `start()` method:


```js
const myWorker = new SharedWorker("worker.js");
myWorker.port.start();
```


For a full example, see our Basic shared worker example (run shared worker.)

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

| Specification |
| --- |
| HTML Standard # dom-sharedworker-port-dev |

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

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

See also
--------

* `SharedWorker`
ReadableStreamBYOBReader: cancel() method
=========================================

 The **`cancel()`** method of the `ReadableStreamBYOBReader` interface returns a `Promise` that resolves when the stream is canceled.
 Calling this method signals a loss of interest in the stream by a consumer.

**Note:** If the reader is active, the `cancel()` method behaves the same as that for the associated stream (`ReadableStream.cancel()`).

Syntax
------


```js
cancel()
cancel(reason)
```

### Parameters

`reason` Optional

A human-readable reason for the cancellation. The underlying source may or may not use it.

### Return value

A `Promise`, which fulfills with the value given in the `reason` parameter.

### Exceptions

`TypeError`

The source object is not a `ReadableStreamBYOBReader`, or the stream has no owner.

Examples
--------

 This example code calls the `cancel()` method when a button is pressed, passing the string "user choice" as a reason.
 The promise resolves when cancellation completes.


```js
button.addEventListener("click", () => {
  reader.cancel("user choice").then(() => console.log(`cancel complete`));
});
```


Note that this code can be seen running in the Using readable byte streams example code (press the **Cancel stream** button).

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

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-cancel② |

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

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

See also
--------

* `ReadableStreamBYOBReader()` constructor
* Using readable byte stream
ReadableStreamBYOBReader: closed property
=========================================

The **`closed`** read-only property of the `ReadableStreamBYOBReader` interface returns a `Promise` that fulfills when the stream closes, or rejects if the stream throws an error or the reader's lock is released.

This property enables you to write code that responds to an end to the streaming process.

Value
-----

A `Promise`.

Examples
--------

The code below shows the pattern for handling the closed/error state of a BYOBReader.


```js
const reader = stream.getReader({ mode: "byob" });
reader.closed
  .then(() => {
    // Resolved - code to handle stream closing
  })
  .catch(() => {
    // Rejected - code to handle error
  });
```

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

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-closed② |

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

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

See also
--------

* `ReadableStreamBYOBReader()` constructor
* Using readable byte stream
ReadableStreamBYOBReader: releaseLock() method
==============================================

 The **`releaseLock()`** method of the `ReadableStreamBYOBReader` interface releases the reader's lock on the stream.
 After the lock is released, the reader is no longer active.

The reader will appear errored if the associated stream is errored when the lock is released; otherwise, the reader will appear closed.

 If the reader's lock is released while it still has pending read requests then the promises returned by the reader's `ReadableStreamBYOBReader.read()` method are immediately rejected with a `TypeError`.
 Unread chunks remain in the stream's internal queue and can be read later by acquiring a new reader.

Syntax
------


```js
releaseLock()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if the source object is not a `ReadableStreamBYOBReader`.

Examples
--------

 A trivial examples is shown below.
 A lock is created as soon as the reader is created on the stream.


```js
const reader = stream.getReader({ mode: "byob" });
reader.releaseLock();
```

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

| Specification |
| --- |
| Streams Standard # ref-for-byob-reader-release-lock② |

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

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

See also
--------

* `ReadableStreamBYOBReader()` constructor
* Using readable byte stream
ReadableStreamBYOBReader: ReadableStreamBYOBReader() constructor
================================================================

The **`ReadableStreamBYOBReader()`** constructor creates and returns a `ReadableStreamBYOBReader` object instance.

**Note:** You generally wouldn't use this constructor manually;
 instead, you'd use the `ReadableStream.getReader()` method with the argument `"byob"`.


Syntax
------


```js
new ReadableStreamBYOBReader(stream)
```

### Parameters

`stream`

The `ReadableStream` to be read.

### Return value

An instance of the `ReadableStreamBYOBReader` object.

### Exceptions

`TypeError`

Thrown if the supplied `stream` parameter is not a `ReadableStream`, or it is already locked for reading by another reader, or its stream controller is not a `ReadableByteStreamController`.

Examples
--------

 The constructor is rarely called directly.
 Instead call `ReadableStream.getReader()` as shown:


```js
const reader = stream.getReader({ mode: "byob" });
```

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

| Specification |
| --- |
| Streams Standard # ref-for-byob-reader-constructor① |

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

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

See also
--------

* `ReadableStreamBYOBReader`
* Using readable byte stream
ScreenOrientation: angle property
=================================

 The **`angle`** read-only property of the
 `ScreenOrientation` interface returns the document's current orientation
 angle.

Value
-----

An unsigned short integer.

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

| Specification |
| --- |
| Screen Orientation # dom-screenorientation-angle |

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

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

 The **`type`** read-only property of the
 `ScreenOrientation` interface returns the document's current orientation
 type, one of `portrait-primary`, `portrait-secondary`, `landscape-primary`, or
 `landscape-secondary`.

Value
-----

A `String`.

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

| Specification |
| --- |
| Screen Orientation # dom-screenorientation-type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ScreenOrientation: change event
===============================

The **`change`** event of the `ScreenOrientation` interface fires when the orientation of the screen has changed, for example when a user rotates their mobile phone.

Syntax
------

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


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

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

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

A generic `Event`.

Example
-------

In the following example, the `change` callback prints the new screen orientation type and angle.


```js
screen.orientation.addEventListener("change", (event) => {
  const type = event.target.type;
  const angle = event.target.angle;
  console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
});
```

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

| Specification |
| --- |
| Screen Orientation # dom-screenorientation-onchange |

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

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

 The **`unlock()`** property of the
 `ScreenOrientation` interface unlocks the orientation of the containing
 document from its default orientation.

Syntax
------


```js
unlock()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

The promise may be rejected with the following exceptions:

`InvalidStateError` `DOMException`

Thrown if the document is not fully active.

`SecurityError` `DOMException`

Thrown if the document's visibility state is hidden or if the document is forbidden to use the feature (for example, by omitting the keyword `allow-orientation-lock` of the `sandbox` attribute of the `iframe` element).

`AbortError` `DOMException`

Thrown if there is any other `lock()` method invoking.

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

| Specification |
| --- |
| Screen Orientation # dom-screenorientation-unlock |

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

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