recursal/MDN huggingface dataset:
SVGAnimationElement: endEvent event
===================================

The **`endEvent`** event of the `SVGAnimationElement` interface is fired when at the active end of the animation is reached.

**Note:** This event is not raised at the simple end of each animation repeat. This event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a DOM method.

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

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

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

A `TimeEvent`. Inherits from `Event`.

Event

TimeEventEvent properties
----------------

`TimeEvent.detail` Read only 

A `long` that specifies some detail information about the Event, depending on the type of the event. For this event type, indicates the repeat number for the animation.

`TimeEvent.view` Read only 

A WindowProxy that identifies the Window from which the event was generated.

Examples
--------

### Animated circle


```html
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <title>SVG SMIL Animate with Path</title>
  <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<hr />

<button>Stop animation</button>

<ul></ul>
```



```css
ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}
```



```js
let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");
let btn = document.querySelector("button");

animateElem.addEventListener("beginEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "beginEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("endEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "endEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("repeatEvent", (e) => {
  let listItem = document.createElement("li");
  let msg = "repeatEvent fired";
  if (e.detail) {
    msg += `; repeat number: ${e.detail}`;
  }
  listItem.textContent = msg;
  list.appendChild(listItem);
});

btn.addEventListener("click", () => {
  btn.disabled = true;
  animateElem.setAttribute("repeatCount", "1");
});
```

### Event handler property equivalent

Note that you can also create an event listener for the `end` event using the `onend` event handler property:


```js
animateElem.onend = () => {
  console.log("endEvent fired");
};
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # EndEvent |

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

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

See also
--------

* SVG animation with SMIL
* `beginEvent` event
* `repeatEvent` event
SVGAnimationElement: beginEvent event
=====================================

The **`beginEvent`** event of the `SVGAnimationElement` interface is fired when the element local timeline begins to play. It will be raised each time the element begins the active duration (i.e., when it restarts, but not when it repeats).

It may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a DOM method.

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

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

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

A `TimeEvent`. Inherits from `Event`.

Event

TimeEventEvent properties
----------------

`TimeEvent.detail` Read only 

A `long` that specifies some detail information about the Event, depending on the type of the event. For this event type, indicates the repeat number for the animation.

`TimeEvent.view` Read only 

A WindowProxy that identifies the Window from which the event was generated.

Examples
--------

### Animated circle


```html
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <title>SVG SMIL Animate with Path</title>
  <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<hr />

<ul></ul>
```



```css
ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}
```



```js
let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");

animateElem.addEventListener("beginEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "beginEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("repeatEvent", (e) => {
  let listItem = document.createElement("li");
  let msg = "repeatEvent fired";
  if (e.detail) {
    msg += `; repeat number: ${e.detail}`;
  }
  listItem.textContent = msg;
  list.appendChild(listItem);
});
```

### Event handler property equivalent

Note that you can also create an event listener for the `begin` event using the `onbegin` event handler property:


```js
animateElem.onbegin = () => {
  console.log("beginEvent fired");
};
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # BeginEvent |

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

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

See also
--------

* SVG animation with SMIL
* `endEvent` event
* `repeatEvent` event
PeriodicSyncEvent: tag property
===============================

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

 The **`tag`** read-only property of the
 `PeriodicSyncEvent` interface returns the developer-defined identifier for
 the `PeriodicSyncEvent`. This is specified when calling the
 `PeriodicSyncManager.register()` method of the
 `PeriodicSyncManager` interface. Multiple tags can be used by the web app
 to run different periodic tasks at different frequencies.

Value
-----

Returns a `String` of the defined identifier.

Examples
--------

 The following example demonstrates listening for a periodic sync event in the service
 worker, and accessing the `tag` property.


```js
self.addEventListener("periodicsync", (event) => {
  console.log(event.tag); // logs the events tag
});
```

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

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-periodicsyncevent-tag |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app
PeriodicSyncEvent: PeriodicSyncEvent() constructor
==================================================

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

 The **`PeriodicSyncEvent()`** constructor
 creates a new `PeriodicSyncEvent` object. This constructor is not typically
 used. The browser creates these objects itself and provides them to
 `onperiodicsync` callback.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `periodicsync`.


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`tag`

The tag referencing the sync event.


### Return value

A new `PeriodicSyncEvent` object configured using the given inputs.

Examples
--------

 This example constructs a new `PeriodicSyncEvent` with the relevant
 associated tag.


```js
const psEvent = new ExtendableEvent("periodicsync", { tag: "unique-tag" });
```

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

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-periodicsyncevent-periodicsyncevent |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app
BeforeUnloadEvent: returnValue property
=======================================

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

 The **`returnValue`** property of the
 `BeforeUnloadEvent` interface, when set to a truthy value, triggers a browser-generated confirmation dialog asking users to confirm if they *really* want to leave the page when they try to close or reload it, or navigate somewhere else. This is intended to help prevent loss of unsaved data.

**Note:** `returnValue` is a legacy feature, and best practice is to trigger the dialog by invoking `Event.preventDefault()` on the `BeforeUnloadEvent` object, while also setting `returnValue` to support legacy cases. See the `beforeunload` event reference for detailed up-to-date guidance.

Value
-----

`returnValue` is initialized to an empty string (`""`) value.

Setting it to just about any truthy value will cause the dialog to be triggered on page close/reload, however note that it also requires sticky activation. In other words, the browser will only show the dialog if the frame or any embedded frame receives a user gesture or user interaction. If the user has never interacted with the page, then there is no user data to save, so no legitimate use case for the dialog.

**Note:** A generic browser-specified string is displayed in the dialog. This cannot be controlled by the webpage code.

Examples
--------

See the `beforeunload` event reference page for a best practice example.

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

| Specification |
| --- |
| HTML Standard # dom-beforeunloadevent-returnvalue |

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

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

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

 The **`navigationType`** read-only property of the
 `NavigationTransition` interface returns the type of the ongoing navigation.

Value
-----

An enumerated value representing the type of ongoing navigation.

The possible values are:

* `push`: A new location is navigated to, causing a new entry to be pushed onto the history list.
* `reload`: The `Navigation.currentEntry` is reloaded.
* `replace`: The `Navigation.currentEntry` is replaced with a new history entry. This new entry will reuse the same `key`, but be assigned a different `id`.
* `traverse`: The browser navigates from one existing history entry to another existing history entry.
Examples
--------


```js
console.log(navigation.transition.navigationType);
```

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

| Specification |
| --- |
| HTML Standard # dom-navigationtransition-navigationtype-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigationTransition: finished property
=======================================

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

 The **`finished`** read-only property of the
 `NavigationTransition` interface returns a `Promise` that fulfills at the same time the `navigatesuccess` event fires, or rejects at the same time the `navigateerror` event fires.

Value
-----

A `Promise` that resolves to `undefined`.

Examples
--------


```js
async function cleanupNavigation() {
  await navigation.transition.finished;
  // Navigation has completed successfully
  // Cleanup any ongoing monitoring
}
```

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

| Specification |
| --- |
| HTML Standard # dom-navigationtransition-finished-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigationTransition: from property
===================================

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

 The **`from`** read-only property of the
 `NavigationTransition` interface returns the `NavigationHistoryEntry` that the transition is coming from.

Value
-----

A `NavigationHistoryEntry` object.

Examples
--------


```js
console.log(navigation.transition.from);
```

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

| Specification |
| --- |
| HTML Standard # dom-navigationtransition-from-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
CSSMediaRule: media property
============================

 The read-only **`media`** property of the
 `CSSMediaRule` interface `MediaList` represents the intended
 destination medium for style information.

Value
-----

a `MediaList`

Examples
--------

 The CSS includes a media query with one style rule. This will be the first
 `CSSRule` returned by `document.styleSheets[0].cssRules`.
 Calling `myRules[0].media` therefore returns a `MediaList`
 object representing the media query.


```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); // a MediaList
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # dom-cssmediarule-media |

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

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

The **`SVGAElement.target`** read-only property of `SVGAElement` returns an `SVGAnimatedString` object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.

This property is used when there are multiple possible targets for the ending resource, like when the parent document is a multi-frame HTML or XHTML document.

Value
-----

An `SVGAnimatedString` indicating the ending resource target that opens the document when the link is activated.

Sample values can be found here

Examples
--------

The code is taken from the "SVGAElement example code"


```js
// ...
const linkRef = document.querySelector("a");
linkRef.target = "\_blank";
// ...
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGAElement\_\_target |

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

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

See also
--------

* `target`
CSS: highlights static property
===============================

The static, read-only **`highlights`** property of the `CSS` interface provides access to the `HighlightRegistry` used to style arbitrary text ranges using the CSS Custom Highlight API.

Value
-----

The `HighlightRegistry` object.

Examples
--------

The following example demonstrates creating multiple text ranges, then creating a `Highlight` object for them, registering this highlight in the `HighlightRegistry`, and finally styling the text ranges using the `::highlight()` pseudo-element.


```js
const parentNode = document.getElementById("foo");

const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

const myCustomHighlight = new Highlight(range1, range2);

CSS.highlights.set("my-custom-highlight", myCustomHighlight);
```



```css
::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}
```

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

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # dom-css-highlights |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
CSS: escape() static method
===========================

 The **`CSS.escape()`** static method returns a
 string containing the escaped string passed as parameter, mostly for
 use as part of a CSS selector.

Syntax
------


```js
CSS.escape(str)
```

### Parameters

`str`

The string to be escaped.

### Return value

The escaped string.

Examples
--------

### Basic results


```js
CSS.escape(".foo#bar"); // "\\.foo\\#bar"
CSS.escape("()[]{}"); // "\\(\\)\\[\\]\{\}"
CSS.escape('--a'); // "--a"
CSS.escape(0); // "\\30 ", the Unicode code point of '0' is 30
CSS.escape('\0'); // "\ufffd", the Unicode REPLACEMENT CHARACTER
```

### In context uses

 To escape a string for use as part of a selector, the `escape()` method can
 be used:


```js
const element = document.querySelector(`#${CSS.escape(id)} > img`);
```


 The `escape()` method can also be used for escaping strings, although it
 escapes characters that don't strictly need to be escaped:


```js
const element = document.querySelector(`a[href="#${CSS.escape(fragment)}"]`);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-css.escape()-method |

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

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

See also
--------

* The `CSS` interface where this static method resides.
* A polyfill for the CSS.escape
CSS numeric factory functions
=============================

 The **CSS numeric factory
functions**, such as `CSS.em()` and
 `CSS.turn()` are methods that return CSSUnitValues with the value being
 the numeric argument and the unit being the name of the method used. These
 functions create new numeric values less verbosely than using the
 `CSSUnitValue()` constructor.

Syntax
------


```js
CSS.number(number)
CSS.percent(number)

// <length>
CSS.em(number)
CSS.ex(number)
CSS.ch(number)
CSS.ic(number)
CSS.rem(number)
CSS.lh(number)
CSS.rlh(number)
CSS.vw(number)
CSS.vh(number)
CSS.vi(number)
CSS.vb(number)
CSS.vmin(number)
CSS.vmax(number)
CSS.cm(number)
CSS.mm(number)
CSS.Q(number)
CSS.in(number)
CSS.pt(number)
CSS.pc(number)
CSS.px(number)

// <angle>
CSS.deg(number)
CSS.grad(number)
CSS.rad(number)
CSS.turn(number)

// <time>
CSS.s(number)
CSS.ms(number)

// <frequency>
CSS.Hz(number)
CSS.kHz(number)

// <resolution>
CSS.dpi(number)
CSS.dpcm(number)
CSS.dppx(number)

// <flex>
CSS.fr(number)
```

Examples
--------

 We use the `CSS.vmax()` numeric factory function to create a
 `CSSUnitValue`:


```js
const height = CSS.vmax(50);

console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
```


 In this example, we set the margin on our element using the `CSS.px()`
 factory function:


```js
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |

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

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

See also
--------

* `CSSUnitValue()`
CSS: supports() static method
=============================

 The **`CSS.supports()`** static method returns a boolean value
 indicating if the browser supports a given CSS feature, or not.

Syntax
------


```js
CSS.supports(propertyName, value)
CSS.supports(supportCondition)
```

### Parameters

 There are two distinct sets of parameters. The first one allows to test the support of
 a pair *property-value*:

`propertyName`

A string containing the name of the CSS property to check.

`value`

A string containing the value of the CSS property to check.


 The second syntax takes one parameter matching the condition of
 `@supports`:

`supportCondition`

A string containing the condition to check.

### Return value

`true` if the browser supports the rule, otherwise `false`.

Examples
--------


```js
result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");

result = CSS.supports(
  "(transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)",
);

// result is true or false
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports |

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

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

See also
--------

* The `@supports` at-rule that allows for the same functionality but in a
 declarative way.
* The `CSSSupportsRule` CSSOM class allowing to manipulate
 `@supports` at-rules.
CSS: paintWorklet static property
=================================

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

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

 The static, read-only **`paintWorklet`** property of the `CSS` interface provides access to the
 paint worklet, which programmatically generates an image where a CSS
 property expects a file.

Value
-----

The associated `Worklet` object.

Examples
--------

 The following example demonstrates loading a paint worklet from its js
 file and does so by feature detection.


```js
if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule("checkerboard.js");
}
```

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

| Specification |
| --- |
| CSS Painting API Level 1 # ref-for-dom-css-paintworklet |

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

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

See also
--------

* CSS Painting API
* Houdini APIs