recursal/MDN huggingface dataset:
CookieStore: delete() method
============================

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

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

The **`delete()`** method of the `CookieStore` interface deletes a cookie with the given name or options object. The `delete()` method expires the cookie by changing the date to one in the past.

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

Syntax
------


```js
delete(name)
delete(options)
```

### Parameters

This method requires one of the following:

`name` Optional

A string with the name of a cookie.

Or

`options` Optional

An object containing:

`name`

A string with the name of a cookie.

`domain` Optional

A string with the domain of a cookie. Defaults to `null`.

`path` Optional

A string containing a path. Defaults to `/`.

`partitioned` Optional

A boolean value that defaults to `false`. Setting it to `true` specifies that the cookie to delete will be a partitioned cookie. See Cookies Having Independent Partitioned State (CHIPS) for more information.


**Note:** The `url` option enables the modification of a cookie scoped under a particular URL. Service workers can obtain cookies that would be sent to any URL under their scope. From a document you may only obtain the cookies at the current URL, so the only valid URL in a document context is the document's URL.

### Return value

A `Promise` that resolves with `undefined` when deletion completes.

### Exceptions

`SecurityError` `DOMException`

Thrown if the origin can not be serialized to a URL.

`TypeError`

Thrown if deleting the cookie represented by the given `name` or `options` fails.

Examples
--------

In this example, a cookie is deleted by passing the name to the `delete()` method.


```js
const result = cookieStore.delete("cookie1");

console.log(result);
```

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

| Specification |
| --- |
| Cookie Store API # dom-cookiestore-delete |

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

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

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

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

A `change` event is fired at a `CookieStore` object when a change is made to any cookie.

Syntax
------

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


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

cookieStore.onchange = (event) => { }
```

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

A `CookieChangeEvent`. Inherits from `Event`.

Event

CookieChangeEventExamples
--------

To be informed when a cookie has changed, you can add a handler to the `cookieStore` instance using `addEventListener()`, like this:


```js
cookieStore.addEventListener("change", (event) => {
  console.log("1 change event");
});
```


Alternatively, you can use the `onchange` event handler property to establish a handler for the `change` event:


```js
cookieStore.onchange = (event) => {
  console.log("1 change event");
};
```

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

| Specification |
| --- |
| Cookie Store API # intro-monitor |
| Cookie Store API # dom-cookiestore-onchange |

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

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

 The **`value`** read-only property of the
 `IDBCursorWithValue` interface returns the value of the current cursor,
 whatever that is.

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

Value
-----

The value of the current cursor.

Examples
--------

 In this example we create a transaction, retrieve an object store, then use a cursor to
 iterate through all the records in the object store. Within each iteration we log the
 value of the cursor with `cursor.value`.

 The cursor does not require us to select the data based
 on a key; we can just grab all of it. Also note that in each iteration of the loop,
 you can grab data from the current record under the cursor object using `cursor.value.foo`.
 For a complete working example, see our IDBCursor example
 (view example live.)


```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.value);
      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursorwithvalue-value① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
CSSSkewY: CSSSkewY() constructor
================================

 The **`CSSSkewY()`** constructor creates a new
 `CSSSkewY` object which represents the
 `skewY()` value
 of the individual `transform` property in CSS.

Syntax
------


```js
new CSSSkewY(ay)
```

### Parameters

`ay`

 A value for the `ay` angle of the `CSSSkewY` object to be
 constructed. This must be a `CSSNumericValue`.


Examples
--------

To do

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

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

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

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

 The **`ay`** property of the
 `CSSSkewY` interface gets and sets the angle used to distort the element
 along the y-axis (or ordinate).

Value
-----

A `CSSNumericValue`.

Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskewy-ay |

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

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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

 The read-only **`size`** property of
 the `Metadata` interface specifies the size, in bytes, of the referenced
 file or other file system object on disk.

Value
-----

A number indicating the size of the file in bytes.

Examples
--------

 This example checks the size of a log file and removes it if it's larger than a
 megabyte.


```js
workingDirectory.getFile(
  "log/important.log",
  {},
  (fileEntry) => {
    fileEntry.getMetadata((metadata) => {
      if (metadata.size > 1048576) {
        fileEntry.remove(() => {
          /\* log file removed; do something clever here \*/
        });
      }
    });
  },
  handleError,
);
```

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

This feature has been removed from all specification and is not in the process of being standardized.

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `Metadata`
* `FileSystemEntry.getMetadata()`
* `FileSystemFileEntry`
Metadata: modificationTime property
===================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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

 The read-only **`modificationTime`**
 property of the `Metadata` interface is a `Date` object which
 specifies the date and time the file system entry (or the data referenced by the
 entry) was last modified. A file system entry is considered to have been
 modified if the metadata or the contents of the referenced file (or directory, or
 whatever other kind of file system entry might exist on the platform in use) has
 changed.

Value
-----

A `Date` timestamp indicating when the file system entry was last changed.

Examples
--------

 This example tries to get a particular working file at `tmp/workfile.json`.
 Once that file has been found, its metadata is obtained and the file's modification
 timestamp year is compared to the current year. If it was last modified in a year at
 least five prior to the current year, the file is removed and a new one is created.


```js
workingDirectory.getFile(
  "tmp/workfile.json",
  { create: true },
  (fileEntry) => {
    fileEntry.getMetadata((metadata) => {
      if (
        new Date().getFullYear() - metadata.modificationTime.getFullYear() >=
        5
      ) {
        fileEntry.remove(() => {
          workingDirectory.getFile(
            "tmp/workfile.json",
            { create: true },
            (newEntry) => {
              fileEntry = newEntry;
            },
          );
        });
      }
    });
  },
  handleError,
);
```

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

This feature has been removed from all specification and is not in the process of being standardized.

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `Metadata`
* `FileSystemEntry.getMetadata()`
* `FileSystemFileEntry`
CustomElementRegistry: whenDefined() method
===========================================

 The **`whenDefined()`** method of the
 `CustomElementRegistry` interface returns a `Promise` that
 resolves when the named element is defined.

Syntax
------


```js
whenDefined(name)
```

### Parameters

`name`

The name of the custom element.

### Return value

A `Promise` that fulfills with the custom element's constructor when a custom element becomes defined with the given name. If a custom element has already been defined with the name, the promise will immediately fulfill.

The promise is rejected with a `SyntaxError` `DOMException` if the name is not a valid custom element name.

Examples
--------

 This example uses `whenDefined()` to detect when the custom elements that
 make up a menu are defined. The menu displays placeholder content until the actual menu
 content is ready to display.


```html
<nav id="menu-container">
  <div class="menu-placeholder">Loading…</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
    …
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>
```



```js
const container = document.getElementById("menu-container");
const placeholder = container.querySelector(".menu-placeholder");
// Fetch all the children of menu that are not yet defined.
const undefinedElements = container.querySelectorAll(":not(:defined)");

async function removePlaceholder() {
  const promises = [...undefinedElements].map((button) =>
    customElements.whenDefined(button.localName),
  );

  // Wait for all the children to be upgraded
  await Promise.all(promises);
  // then remove the placeholder
  container.removeChild(placeholder);
}

removePlaceholder();
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-whendefined-dev |

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

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

 The **`get()`** method of the
 `CustomElementRegistry` interface returns the constructor for a
 previously-defined custom element.

Syntax
------


```js
get(name)
```

### Parameters

`name`

The name of the custom element.

### Return value

The constructor for the named custom element, or `undefined` if there is no custom element defined with the name.

Examples
--------


```js
customElements.define(
  "my-paragraph",
  class extends HTMLElement {
    constructor() {
      let templateContent = document.getElementById("my-paragraph").content;
      super() // returns element this scope
        .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot
        .append(templateContent.cloneNode(true));
    }
  },
);

// Return a reference to the my-paragraph constructor
let ctor = customElements.get("my-paragraph");
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-get-dev |

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

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

 The **`upgrade()`** method of the
 `CustomElementRegistry` interface upgrades all shadow-containing custom
 elements in a `Node` subtree, even before they are connected to the main
 document.

Syntax
------


```js
upgrade(root)
```

### Parameters

`root`

 A `Node` instance with shadow-containing descendant elements to upgrade. If there are no descendant elements that can be upgraded, no error is
 thrown.


### Return value

None (`undefined`).

Examples
--------

Taken from the HTML spec:


```js
const el = document.createElement("spider-man");

class SpiderMan extends HTMLElement {}
customElements.define("spider-man", SpiderMan);

console.assert(!(el instanceof SpiderMan)); // not yet upgraded

customElements.upgrade(el);
console.assert(el instanceof SpiderMan); // upgraded!
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-upgrade-dev |

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

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

 The **`getName()`** method of the
 `CustomElementRegistry` interface returns the name for a
 previously-defined custom element.

Syntax
------


```js
getName(constructor)
```

### Parameters

`constructor`

Constructor for the custom element.

### Return value

The name for the previously defined custom element, or `null` if there is no custom element defined with the constructor.

Examples
--------


```js
class MyParagraph extends HTMLElement {
  constructor() {
    let templateContent = document.getElementById("my-paragraph").content;
    super() // returns element this scope
      .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot
      .append(templateContent.cloneNode(true));
  }
}

customElements.define("my-paragraph", MyParagraph);

// Return a reference to the my-paragraph constructor
customElements.getName(MyParagraph) === "my-paragraph";
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-getname |

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

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

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 `updateTiming()` method of the `AnimationEffect` interface updates the specified timing properties for an animation effect.

Syntax
------


```js
updateTiming(timing)
```

### Parameters

`timing` Optional

An object containing zero or more of the properties from the return value of `AnimationEffect.getTiming()`, representing the timing properties to update.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if invalid values are provided for any of the timing properties.

### Examples

#### Side effects

`updateTiming()` may cause any associated `Animation` to start or stop playing, if for example the effect of a running animation is shortened such that its end time is before `Animation.currentTime` or the effect of a finished animation is lengthened such that its end time is after `Animation.currentTime`.


```js
const animation = document.body.animate([], { duration: 1000 });
animation.finish();
console.log(animation.playState); // finished
animation.effect.updateTiming({ duration: 2000 });
console.log(animation.playState); // running
```

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

| Specification |
| --- |
| Web Animations # dom-animationeffect-updatetiming |

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

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

See also
--------

* Web Animations API
* `AnimationEffect`
* `Animation`
* `AnimationEffect.getTiming()`
* `AnimationEffect.getComputedTiming()`
AnimationEffect: getComputedTiming() method
===========================================

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 `getComputedTiming()` method of the `AnimationEffect` interface returns the calculated timing properties for this animation effect.

**Note:** These values are comparable to the computed styles of an Element returned using `window.getComputedStyle(elem)`.

Syntax
------


```js
getComputedTiming()
```

### Parameters

None.

### Return value

An object which contains:

* all of the properties of the object returned by `AnimationEffect.getTiming()`, except that any `"auto"` values are replaced by computed values that may depend on the type of `AnimationEffect`.
* the following additional properties:

`endTime`

A `number` indicating the end time of the effect in milliseconds from the effect's start. This is equal to `activeDuration` plus `delay` and `endDelay`.

`activeDuration`

A `number` indicating the total duration in milliseconds of all iterations of the effect. This is equal to `duration` multiplied by `iterations` (or zero if that product would be `NaN`).

`localTime`

A `number` or `null`.

Indicates the length of time in milliseconds that the effect has run. This is equal to the `currentTime` of the associated animation, or `null` if the effect is not associated with an animation.

`progress`

`null` or a `number` at least `0` and less than `1`.

Indicates the effect's progress through its current iteration. At the start of the `activeDuration`, this equals the fractional part of `iterationStart`.

Returns `null` if the effect isn't mid-iteration, for example because the effect is in the `delay` or `endDelay` periods, the effect is finished, or `localTime` is `null`.

`currentIteration`

`null` or an integer `number`.

Indicates the index of the current iteration. At the start of the `activeDuration`, this equals the integer part of `iterationStart`.

Returns `null` whenever `progress` is `null`.
Specifications
--------------

| Specification |
| --- |
| Web Animations # dom-animationeffect-getcomputedtiming |

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

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

See also
--------

* Web Animations API
* `AnimationEffect`
* `Animation`
DynamicsCompressorNode: attack property
=======================================

The `attack` property of the `DynamicsCompressorNode` interface is a k-rate `AudioParam` representing the amount of time, in seconds, required to reduce the gain by 10 dB. It defines how quickly the signal is adapted when its volume is increased.

The `attack` property's default value is `0.003` and it can be set between `0` and `1`.

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------


```js
const audioCtx = new AudioContext();
const compressor = audioCtx.createDynamicsCompressor();
compressor.attack.value = 0;
```


See `BaseAudioContext.createDynamicsCompressor()` for more complete example code.

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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-attack |

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

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

See also
--------

* Using the Web Audio API
DynamicsCompressorNode: ratio property
======================================

The `ratio` property of the `DynamicsCompressorNode` interface Is a k-rate `AudioParam` representing the amount of change, in dB, needed in the input for a 1 dB change in the output.

The `ratio` property's default value is `12` and it can be set between `1` and `20`.

![Describes the effect of different ratio on the output signal](/en-US/docs/Web/API/DynamicsCompressorNode/ratio/webaudioratio.png)

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------


```js
const audioCtx = new AudioContext();
const compressor = audioCtx.createDynamicsCompressor();
compressor.ratio.value = 12;
```


See `BaseAudioContext.createDynamicsCompressor()` for more complete example code.

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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-ratio |

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

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

See also
--------

* Using the Web Audio API