recursal/MDN huggingface dataset:
Animation: cancel event
=======================

Baseline 2022
-------------

Newly availableSince September 2022, 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 **`cancel`** event of the `Animation` interface is fired when the `Animation.cancel()` method is called or when the animation enters the `"idle"` play state from another state, such as when the animation is removed from an element before it finishes playing.

**Note:** Creating a new animation that is initially idle does not trigger a `cancel` event on the new animation.

Syntax
------

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


```js
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
```

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

An `AnimationPlaybackEvent`. Inherits from `Event`.

Event

AnimationPlaybackEventEvent properties
----------------

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

`AnimationPlaybackEvent.currentTime` Read only 

The current time of the animation that generated the event.

`AnimationPlaybackEvent.timelineTime` Read only 

The time value of the timeline of the animation that generated the event.

Examples
--------

If this animation is canceled, remove its element.


```js
animation.oncancel = (event) => {
  animation.effect.target.remove();
};
```

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

| Specification |
| --- |
| Web Animations # dom-animation-oncancel |
| Web Animations # cancel-event |

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

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

See also
--------

* Web Animations API
* `Animation`
Animation: finish event
=======================

Baseline 2022
-------------

Newly availableSince September 2022, 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 **`finish`** event of the `Animation` interface is fired when the animation finishes playing, either when the animation completes naturally, or
 when the `Animation.finish()` method is called to immediately cause the
 animation to finish up.


**Note:** The `"paused"` play state supersedes the `"finished"` play
 state; if the animation is both paused and finished, the `"paused"` state
 is the one that will be reported. You can force the animation into the
 `"finished"` state by setting its `startTime` to
 `document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)`.


Syntax
------

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


```js
addEventListener("finish", (event) => { })
onfinish = (event) => { }
```

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

An `AnimationPlaybackEvent`. Inherits from `Event`.

Event

AnimationPlaybackEventEvent properties
----------------

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

`AnimationPlaybackEvent.currentTime` Read only 

The current time of the animation that generated the event.

`AnimationPlaybackEvent.timelineTime` Read only 

The time value of the timeline of the animation that generated the event.

Examples
--------

`Animation.onfinish` is used several times in the Alice in Web Animations API Land
 Growing/Shrinking Alice Game.
 Here is one instance where we add pointer events back to an element after
 its opacity animation has faded it in:


```js
// Add an animation to the game's ending credits
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);

// Pause said animation's credits
bringUI.pause();

// This function removes pointer events on the credits.
hide(endingUI);

// When the credits are later faded in,
// we re-add the pointer events when they're done
bringUI.onfinish = (event) => {
  endingUI.style.pointerEvents = "auto";
};
```

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

| Specification |
| --- |
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |

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

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

See also
--------

* Web Animations API
* `Animation`
* `Animation.finish()`
MediaQueryListEvent: media property
===================================

 The **`media`** read-only property of the
 `MediaQueryListEvent` interface is a string representing
 a serialized media query.

Value
-----

A string representing a serialized media query.

Examples
--------


```js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(max-width: 600px)");

mql.addEventListener("change", (event) => {
  if (event.matches) {
    // The viewport is 600 pixels wide or less
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    // The viewport is more than 600 pixels wide
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }

  console.log(event.media);
});
```

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

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylistevent-media |

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

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

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryListEvent: MediaQueryListEvent() constructor
======================================================

The **`MediaQueryListEvent()`** constructor creates a new `MediaQueryListEvent` object.

Syntax
------


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

### Parameters

`type`

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


`options` Optional

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

`media` Optional

A string representing a serialized media query. It defaults to `""`.

`matches` Optional

A boolean value representing the media query status; `true` if it matches, `false` if not. It defaults to `false`.


### Return value

A new `MediaQueryListEvent` object.

Examples
--------


```js
const media = "(max-width: 600px)";
const matches = true;

const myMediaQueryListEvent = new MediaQueryListEvent("change", {
  media,
  matches,
});
```

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

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylistevent-mediaquerylistevent |

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

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

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryListEvent: matches property
=====================================

 The **`matches`** read-only property of the
 `MediaQueryListEvent` interface is a boolean value that is
 `true` if the `document` currently matches the media query list,
 or `false` if not.

Value
-----

 A boolean value; returns `true` if the `document`
 currently matches the media query list, `false` if not.

Examples
--------


```js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(max-width: 600px)");

mql.addEventListener("change", (event) => {
  if (event.matches) {
    // The viewport is 600 pixels wide or less
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    // The viewport is more than 600 pixels wide
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
});
```

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

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylistevent-matches |

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

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

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
CSSLayerBlockRule: name property
================================

Baseline 2022
-------------

Newly availableSince March 2022, 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 read-only **`name`** property of the `CSSLayerBlockRule` interface represents the name of the associated cascade layer.

Value
-----

A string containing the name of the layer, or `""` if the layer is anonymous.

Examples
--------

### HTML


```html
<output></output> <output></output>
```

### CSS


```css
output {
  display: block;
}

@layer special {
  div {
    color: rebeccapurple;
  }
}

@layer {
  div {
    color: black;
  }
}
```

### JavaScript


```js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
const rules = document.styleSheets[1].cssRules;
// Note that stylesheet #1 is the stylesheet associated with this embedded example,
// while stylesheet #0 is the stylesheet associated with the whole MDN page

const layer = rules[1]; // A CSSLayerBlockRule
const anonymous = rules[2]; // An anonymous CSSLayerBlockRule

item1.textContent = `The first CSSLayerBlockRule defines the "${layer.name}" layer.`;
item2.textContent = `A second CSSLayerBlockRule defines a layer with the following name: "${anonymous.name}".`;
```

### Result

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # dom-csslayerblockrule-name |

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

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

See also
--------

* The statement declaration of an `@layer` is represented by a `CSSLayerStatementRule`.
* How to create named cascade layers in CSS.
ImageBitmapRenderingContext: transferFromImageBitmap() method
=============================================================

 The **`ImageBitmapRenderingContext.transferFromImageBitmap()`**
 method displays the given `ImageBitmap` in the canvas associated with this
 rendering context. The ownership of the `ImageBitmap` is transferred to the
 canvas as well.

 This method was previously named `transferImageBitmap()`, but was renamed in
 a spec change. The old name is being kept as an alias to avoid code breakage.

Syntax
------


```js
transferFromImageBitmap(bitmap)
```

### Parameters

`bitmap`

An `ImageBitmap` object to transfer.

### Return value

None (`undefined`).

Examples
--------

### HTML


```html
<canvas id="htmlCanvas"></canvas>
```

### JavaScript


```js
const htmlCanvas = document
  .getElementById("htmlCanvas")
  .getContext("bitmaprenderer");

// Draw a WebGL scene offscreen
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing using the gl context

// Transfer the current frame to the visible canvas
const bitmap = offscreen.transferToImageBitmap();
htmlCanvas.transferFromImageBitmap(bitmap);
```

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

| Specification |
| --- |
| HTML Standard # dom-imagebitmaprenderingcontext-transferfromimagebitmap-dev |

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

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

See also
--------

* The interface defining this method, `ImageBitmapRenderingContext`
* `OffscreenCanvas`
* `OffscreenCanvas.transferToImageBitmap()`
HTMLTitleElement: text property
===============================

The **`text`** property of the `HTMLTitleElement` interface represents the text of the document's title. Only the text part is included; tags within the element and their content are stripped and ignored.

Value
-----

A string.

Examples
--------

Consider the example below:


```html
<!doctype html>
<html lang="en-US">
  <head>
    <title>
      Hello world! <span class="highlight">Isn't this wonderful</span> really?
    </title>
  </head>
  <body></body>
</html>
```



```js
const title = document.querySelector("title");
console.log(title.text); // yield: "Hello world! really?"
```


As you can see, the tag `span` and its content were skipped.

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

| Specification |
| --- |
| HTML Standard # dom-title-text-dev |

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

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

 The **`value`** property of the
 `CSSKeywordValue` interface returns or sets the value of the
 `CSSKeywordValue`.

Value
-----

A string.

### Exceptions

`TypeError`

Thrown if the `value` property is an empty `String` when being set.

Examples
--------

The following example resets the CSS `display` property to its defaults.


```js
let indicator = document.getElementById("indicator");
indicator.attributeStyleMap.set("display", new CSSKeywordValue("initial"));
indicator.attributeStyleMap.get("display").value; // 'initial'
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csskeywordvalue-value |

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

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

 The **`CSSKeywordValue()`** constructor
 creates a new `CSSKeywordValue` object which represents CSS keywords and
 other identifiers.

Syntax
------


```js
new CSSKeywordValue(val)
```

### Parameters

`value`

Sets or returns the value of the new `CSSKeywordValue`.

### Exceptions

`TypeError`

Thrown if the `value` parameter is not specified or it is not of type `String`.

Examples
--------

 The following example resets the CSS `display` property to its defaults,
 setting the inline
 `style` attribute
 to `style="display: initial"` if viewed in the developer tools inspector.
```

#myElement {
  display: flex;
}
```


```
<div id="myElement">
  Check the developer tools to see the log in the console and to inspect the
  style attribute on this div.
</div>
```



```js
const keyword = new CSSKeywordValue("initial");
const myElement = document.getElementById("myElement").attributeStyleMap;
myElement.set("display", keyword);

console.log(myElement.get("display").value); // 'initial'
console.dir(keyword);
```

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

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

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

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

The **`type`** read-only property returns the type of navigation.

You can use this property to categorize your navigation timing data as each of these types will have different performance characteristics. Users going back and forth might experience a faster site than users performing navigation for the first time or submitting forms, etc.

For example, if your site provides new content frequently, you might want to refresh that content using Fetch or similar and avoid users having to hit reload for the entire page all the time. The `"reload"` type can help you find pages that are reloaded frequently.

Value
-----

The `type` property can have the following values:

`"navigate"`

Navigation started by clicking a link, entering the URL in the browser's address bar, form submission, or initializing through a script operation other than `reload` and `back_forward` as listed below.

`"reload"`

Navigation is through the browser's reload operation, `location.reload()` or a Refresh pragma directive like `<meta http-equiv="refresh" content="300">`.

`"back_forward"`

Navigation is through the browser's history traversal operation.

`"prerender"`

Navigation is initiated by a prerender hint.

Examples
--------

### Logging reload navigation

The `type` property can be used to check whether the navigation was of type `reload`. You could collect these `reload` entries in a server-side endpoint to determine which pages of your site gets reloaded the most, or collect all navigation types and determine what percent of users go back and forward, for example.

Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.type === "reload") {
      console.log(`${entry.name} was reloaded!`);
      console.log(entry);
    }
  });
});

observer.observe({ type: "navigation", buffered: true });
```


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  if (entry.type === "reload") {
    console.log(`${entry.name} was reloaded!`);
    console.log(entry);
  }
});
```

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

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-type |

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

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

The **`unloadEventStart`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately before the current document's `unload` event handler starts.

Value
-----

The `unloadEventStart` property can have the following values:

* A `DOMHighResTimeStamp` representing the time immediately before the current document's `unload` event handler starts.
* `0` if there is no previous document.
* `0` if the previous page was on another origin.
Examples
--------

### Measuring `unload` event handler time

The `unloadEventStart` property can be used to measure how long it takes process the`unload` event handler.

This is useful to measure the time of long running `unload` event handlers.


```js
window.addEventListener("unload", (event) => {
  // Some long running code
});
```


Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
    if (unloadEventTime > 0) {
      console.log(
        `${entry.name}: unload event handler time: ${unloadEventTime}ms`,
      );
    }
  });
});

observer.observe({ type: "navigation", buffered: true });
```


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const loadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
  if (unloadEventTime > 0) {
    console.log(`${entry.name}:
 load event handler time: ${unloadEventTime}ms`);
  }
});
```

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

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-unloadeventstart |

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

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

See also
--------

* `unload` event
PerformanceNavigationTiming: redirectCount property
===================================================

The **`redirectCount`** read-only property returns a number representing the number of redirects since the last non-redirect navigation in the current browsing context.

The higher the number of redirects on a page, the longer the page load time. To improve the performance of your web page, avoid multiple redirects.

The `redirectStart` and `redirectEnd` properties can be used to measure redirection time. Note that they will return `0` for cross-origin redirects.

Note that client side redirects, such as `<meta http-equiv="refresh" content="0; url=https://example.com/">` are not considered here.

Value
-----

The `redirectCount` property can have the following values:

* A number representing the number of redirects since the last non-redirect navigation in the current browsing context.
* `0` if the redirect is cross-origin.
Examples
--------

### Logging entries with redirects

The `redirectCount` property can be used to check whether there are one or more redirects. We log the entry's name and the redirection time if it is available.

Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const name = entry.name;
    const redirectCount = entry.redirectCount;
    const redirectTime = entry.redirectEnd - entry.redirectStart;
    if (redirectCount > 0) {
      console.log(`${name}: Redirect count: ${redirectCount}`);
      if (redirectTime > 0) {
        console.log(`${name}: Redirect time: ${redirectTime}ms`);
      }
    }
  });
});

observer.observe({ type: "navigation", buffered: true });
```


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const name = entry.name;
  const redirectCount = entry.redirectCount;
  const redirectTime = entry.redirectEnd - entry.redirectStart;
  if (redirectCount > 0) {
    console.log(`${name}: Redirect count: ${redirectCount}`);
    if (redirectTime > 0) {
      console.log(`${name}: Redirect time: ${redirectTime}ms`);
    }
  }
});
```

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

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-redirectcount |

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

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

See also
--------

* `PerformanceResourceTiming.redirectStart`
* `PerformanceResourceTiming.redirectEnd`