recursal/MDN huggingface dataset:
HTMLImageElement: src property
==============================

 The `HTMLImageElement` property
 **`src`**, which reflects the HTML `src` attribute, specifies the image to display in the `<img>`
 element.

Value
-----

 When providing only a single image, rather than a set of images from which the browser
 selects the best match for the viewport size and display pixel density, the
 `src` attribute is a string specifying the URL of the
 desired image. This can be set either within the HTML itself using the
 `src` content attribute, or programmatically by setting the
 element's `src` property.

 If you use the `srcset` content attribute to provide multiple
 image options for different display pixel densities, the URL specified by the
 `src` attribute is used in one of two ways:

* as a fallback for browsers that don't support `srcset`.
* as an equivalent for specifying an image in `srcset` with the size
 multiplier `1x`; that is, the image specified by `src` is used
 on low-density screens (such as typical 72 DPI or 96 DPI displays).

 Additionally, if you use `src` along with *both*
`sizes` (or the
 corresponding `sizes` content attribute) *and*
`srcset` in order to choose an image based on the viewport size, the
 `src` attribute is only used as a fallback for browsers that don't support
 `sizes` and `srcset`; otherwise, it's not used at all.

Examples
--------

### Specifying a single image

#### HTML


```html
<img
 src="grapefruit-slice-332-332.jpg"
 width="160"
 alt="Slices of grapefruit, looking yummy." />
```


#### Result

### Using src with an image set

 When using a set of images with the `srcset`
 property, the `src` serves as either a fallback for older browsers, or as the
 `1x` size of the image.

#### HTML

#### Result

### Specifying a fallback for viewport-based selection

 When using viewport-bases selection of an image from a `srcset` by also
 specifying the `sizes` property, the
 `src` property serves as the fallback to be used on browsers that don't
 support viewport-based selection. Browsers that *do* support viewport-based
 selection will ignore `src` in this situation.

#### HTML

#### Result

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

| Specification |
| --- |
| HTML Standard # attr-img-src |

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

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

 The `HTMLImageElement` interface's
 **`naturalHeight`** property is a read-only value which
 returns the intrinsic (natural), density-corrected height of the image in
 CSS pixels.

 This is the height the image is if
 drawn with nothing constraining its height; if you don't specify a height for the image,
 or place the image inside a container that either limits or expressly specifies the
 image height, it will be rendered this tall.


**Note:** Most of the time the natural height is the actual height of the image sent by the server.
 Nevertheless, browsers can modify an image before pushing it to the renderer. For example, Chrome
 degrades the resolution of images on low-end devices. In such cases, `naturalHeight` will consider the height of the image modified
 by such browser interventions as the natural height, and returns this value.


Value
-----

 An integer value indicating the intrinsic height, in CSS pixels, of the image. This is
 the height at which the image is naturally drawn when no constraint or specific value is
 established for the image. This natural height is corrected for the pixel density of the
 device on which it's being presented, unlike `height`.

 If the intrinsic height is not available—either because the image does not specify an
 intrinsic height or because the image data is not available in order to obtain this
 information, `naturalHeight` returns 0.

Examples
--------

 This example displays both the natural, density-adjusted size of an image as well as
 its rendered size as altered by the page's CSS and other factors.

### HTML


```html
<div class="box">
  <img
 src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
 class="image"
 alt="A round wall clock with a white dial and black numbers" />
</div>
<pre></pre>
```


 The HTML features a 400x398 pixel image which is placed inside a
 `<div>`.

### CSS


```css
.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}
```


 The main thing of note in the CSS above is that the style used for the container the
 image will be drawn in is 200px wide, and the image will be drawn to fill its width
 (100%).

### JavaScript


```js
const output = document.querySelector("pre");
const image = document.querySelector("img");

image.addEventListener("load", (event) => {
  const { naturalWidth, naturalHeight, width, height } = image;
  output.textContent = `
Natural size: ${naturalWidth} x ${naturalHeight} pixels
Displayed size: ${width} x ${height} pixels
`;
});
```


 The JavaScript code dumps the natural and as-displayed sizes into the
 `<pre>`. This is done in response to
 the images's `load` event handler, in order to ensure
 that the image is available before attempting to examine its width and height.

### Result

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

| Specification |
| --- |
| HTML Standard # dom-img-naturalheight-dev |

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

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

 The `HTMLImageElement`
 interface's **`crossOrigin`** attribute is a string which
 specifies the Cross-Origin Resource Sharing (CORS) setting to use when
 retrieving the image.

Value
-----

 A string of a keyword specifying the CORS mode to use when fetching
 the image resource. If you don't specify `crossOrigin`, the image is fetched
 without CORS (the fetch `no-cors` mode).

Permitted values are:

`anonymous`

 Requests by the `<img>` element have their `mode` set to `cors` and their `credentials` mode set to `same-origin`. This means that CORS is enabled
 and credentials are sent *if* the image is fetched from the same origin from
 which the document was loaded.


`use-credentials`

 Requests by the `HTMLImageElement` will use the `cors` mode
 and the `include` credentials mode; all image requests by the element will
 use CORS, regardless of what domain the fetch is from.



 If `crossOrigin` is an empty string (`""`),
 the `anonymous` mode is selected.

Examples
--------

 In this example, a new `<img>` element is created and added to the
 document, loading the image with the Anonymous state; the image will be loaded using
 CORS and credentials will be used for all cross-origin loads.

### JavaScript

 The code below demonstrates setting the `crossOrigin` property on an
 `<img>` element to configure CORS access for the fetch of a
 newly-created image.


```js
const imageUrl = "clock-demo-400px.png";
const container = document.querySelector(".container");

function loadImage(url) {
  const image = new Image(200, 200);
  image.addEventListener("load", () => container.prepend(image));

  image.addEventListener("error", () => {
    const errMsg = document.createElement("output");
    errMsg.value = `Error loading image at ${url}`;
    container.append(errMsg);
  });

  image.crossOrigin = "anonymous";
  image.alt = "";
  image.src = url;
}

loadImage(imageUrl);
```

### HTML


```html
<div class="container">
  <p>
    Here's a paragraph. It's a very interesting paragraph. You are captivated by
    this paragraph. Keep reading this paragraph. Okay, now you can stop reading
    this paragraph. Thanks for reading me.
  </p>
</div>
```

### CSS


```css
body {
  font:
    1.125rem/1.5,
    Helvetica,
    sans-serif;
}

.container {
  display: flow-root;
  width: 37.5em;
  border: 1px solid #d2d2d2;
}

img {
  float: left;
  padding-right: 1.5em;
}

output {
  background: rgb(100 100 100 / 100%);
  font-family: Courier, monospace;
  width: 95%;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-img-crossorigin |

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

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

See also
--------

* `HTMLLinkElement.crossOrigin`
* `HTMLMediaElement.crossOrigin`
* `HTMLScriptElement.crossOrigin`
HTMLImageElement: currentSrc property
=====================================

 The read-only `HTMLImageElement` property
 **`currentSrc`** indicates the URL of the image which is
 currently presented in the `<img>` element it represents.

Value
-----

 A string indicating the full URL of the image currently visible in
 the `<img>` element represented by the `HTMLImageElement`.
 This is useful when you provide multiple image options using the
 `sizes` and/or
 `HTMLImageElement.srcset` properties. `currentSrc` lets you
 determine which image from the set of provided images was selected by the browser.

Examples
--------

 In this example, two different sizes are provided for an image of a clock. One is 200px
 wide and the other is 400px wide. The `sizes` attribute is
 provided to indicate that the image should be drawn at 50% of the document width if the
 viewport is under 400px wide; otherwise, the image is drawn at 90% width of the
 document.

### HTML


```html
<img
 src="/files/16797/clock-demo-400px.png"
 alt="Clock"
 srcset="
 /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
 /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
 "
 sizes="(max-width: 400px) 50%, 90%" />
```

### JavaScript


```js
const clockImage = document.querySelector("img");
const p = document.createElement("p");

p.textContent = clockImage.currentSrc.endsWith("200px.png")
  ? "Using the 400px image!"
  : "Using the 200px image.";
document.body.appendChild(p);
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-img-currentsrc-dev |

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

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

 The `HTMLImageElement` interface's read-only
 **`naturalWidth`** property returns the intrinsic (natural),
 density-corrected width of the image in CSS
 pixels.

 This is the width the image is if drawn with nothing constraining
 its width; if you neither specify a width for the image nor place the image inside a
 container that limits or expressly specifies the image width, this is the number of CSS
 pixels wide the image will be.

 The corresponding `naturalHeight` method
 returns the natural height of the image.


**Note:** Most of the time the natural width is the actual width of the image sent by the server.
 Nevertheless, browsers can modify an image before pushing it to the renderer. For example, Chrome
 degrades the resolution of images on low-end devices. In such cases, `naturalWidth` will consider the width of the image modified
 by such browser interventions as the natural width, and returns this value.


Value
-----

 An integer value indicating the intrinsic width of the image, in CSS pixels. This is
 the width at which the image is naturally drawn when no constraint or specific value is
 established for the image. This natural width is corrected for the pixel density of the
 device on which it's being presented, unlike the value of
 `width`.

 If the intrinsic width is not available—either because the image does not specify an
 intrinsic width or because the image data is not available in order to obtain this
 information, `naturalWidth` returns 0.

Examples
--------

See `HTMLImageElement.naturalHeight` for example code that displays an image in both its natural "density-adjusted" size, and in its rendered size as altered by the page's CSS and other factors.

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

| Specification |
| --- |
| HTML Standard # dom-img-naturalwidth-dev |

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

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

 The
 **`HTMLImageElement.referrerPolicy`**
 property reflects the HTML `referrerpolicy` attribute of the
 `<img>` element defining which referrer is sent when fetching the
 resource.

Value
-----

A string; one of the following:

`no-referrer`

 The `Referer` header will be omitted entirely. No referrer
 information is sent along with requests.


`no-referrer-when-downgrade`

 The URL is sent
 as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP,
 HTTPS→HTTPS), but isn't sent to a less secure destination (e.g. HTTPS→HTTP).


`origin`

 Only send the origin of the document as the referrer in all cases.
 The document `https://example.com/page.html` will send the referrer
 `https://example.com/`.


`origin-when-cross-origin`

 Send a full URL when performing a same-origin request, but only send the origin of
 the document for other cases.


`same-origin`

 A referrer will be sent for same-site origins, but
 cross-origin requests will contain no referrer information.


`strict-origin`

 Only send the origin of the document as the referrer when the protocol security
 level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure
 destination (e.g. HTTPS→HTTP).


`strict-origin-when-cross-origin` (default)

 This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the
 protocol security level stays the same (e.g. HTTPS→HTTPS), and send no header to a
 less secure destination (e.g. HTTPS→HTTP).


`unsafe-url`

 Send a full URL when performing a same-origin or cross-origin request. This policy
 will leak origins and paths from TLS-protected resources to insecure origins.
 Carefully consider the impact of this setting.


Examples
--------


```js
const img = new Image();
img.src = "img/logo.png";
img.referrerPolicy = "origin";

const div = document.getElementById("divAround");
div.appendChild(img); // Fetch the image using the origin as the referrer
```

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

| Specification |
| --- |
| HTML Standard # dom-img-referrerpolicy |

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

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

See also
--------

* `HTMLAnchorElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`, and
 `HTMLIFrameElement.referrerPolicy`.
HTMLImageElement: hspace 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
 *obsolete* **`hspace`** property of the
 `HTMLImageElement` interface specifies the number of pixels of empty
 space to leave empty on the left and right sides of the `<img>` element
 when laying out the page.

 This property reflects the HTML `hspace`
 attribute.

Value
-----

 An integer value specifying the width, in pixels, of the horizontal margin to apply to
 the left and right sides of the image.

Usage notes
-----------

 The value specified for `hspace` is mapped to the `margin-left`
 and `margin-right` properties to specify the width of those margins in
 pixels.


**Warning:** This property is obsolete. You should instead use the CSS
 `margin` property and its longhand forms to establish margins around
 an `<img>`.


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

| Specification |
| --- |
| HTML Standard # attr-img-hspace |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Tools for analyzing Web Audio usage
===================================

While working on your Web Audio API code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work. This article discusses tools available to help you do that.

Chrome
------

A handy web audio inspector can be found in the Chrome Web Store.

Edge
----

*Add information for developers using Microsoft Edge.*

Firefox
-------

Firefox offers a native Web Audio Editor.

Safari
------

*Add information for developers working in Safari.*

See also
--------

* Web Audio API
* Using the Web Audio API
RelativeOrientationSensor: RelativeOrientationSensor() constructor
==================================================================

 The **`RelativeOrientationSensor()`**
 constructor creates a new `RelativeOrientationSensor` object which
 describes the device's physical orientation.

Syntax
------


```js
new RelativeOrientationSensor()
new RelativeOrientationSensor(options)
```

### Parameters

`options` Optional

Options are as follows:

`frequency`

 The desired number of times per second a sample
 should be taken, meaning the number of times per second that the
 `reading` event will be called. A whole number or decimal
 may be used, the latter for frequencies less than a second. The actual
 reading frequency depends device hardware and consequently may be less
 than requested.


`referenceFrame`

 Either `'device'` or
 `'screen'`. The default is `'device'`.



### Exceptions

`SecurityError` `DOMException`

Use of this feature was blocked by a Permissions Policy.

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

| Specification |
| --- |
| Orientation Sensor # dom-relativeorientationsensor-relativeorientationsensor |

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

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

See also
--------

* `reading` event
PerformanceMark: detail property
================================

The read-only **`detail`** property returns arbitrary metadata that was included in the mark upon construction (either when using `performance.mark()` or the `PerformanceMark()` constructor).

Value
-----

Returns the value it is set to (from `markOptions` of `performance.mark()` or the `PerformanceMark()` constructor).

Examples
--------

The following example demonstrates the `detail` property.


```js
performance.mark("dog", { detail: "labrador" });

const dogEntries = performance.getEntriesByName("dog");

dogEntries[0].detail; // labrador
```

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

| Specification |
| --- |
| User Timing # dom-performancemark-detail |

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

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

The **`PerformanceMark()`** constructor creates a `timestamp` with the given name.

Unlike `performance.mark()`, performance marks created by the constructor aren't added to the browser's performance timeline. This means that calls to the `Performance` interface's `getEntries*()` methods (`getEntries()`, `getEntriesByName()` or `getEntriesByType()`) won't show entries for these marks.

Syntax
------


```js
new PerformanceMark(name)
new PerformanceMark(name, markOptions)
```

### Parameters

`name`

A string representing the name of the mark.

`markOptions` Optional

An object for specifying a timestamp and additional metadata for the mark.

`detail` Optional

Arbitrary metadata to include in the mark. Defaults to `null`.

`startTime` Optional

`DOMHighResTimeStamp` to use as the mark time. Defaults to `performance.now()`.


### Return value

A `PerformanceMark` object.

### Exceptions

* `SyntaxError`: Thrown if the `name` given to this method already exists in the `PerformanceTiming` interface.
* `TypeError`: Thrown if `startTime` is negative.
Examples
--------

The following example shows how `PerformanceMark` entries are constructed and then aren't part of the browser's performance timeline.


```js
new PerformanceMark("squirrel");
new PerformanceMark("monkey");
new PerformanceMark("dog");

const allEntries = performance.getEntriesByType("mark");
console.log(allEntries.length);
// 0
```

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

| Specification |
| --- |
| User Timing # dom-performancemark-constructor |

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

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

See also
--------

* `performance.mark()`
AnimationPlaybackEvent: AnimationPlaybackEvent() constructor
============================================================

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 **`AnimationPlaybackEvent()`** constructor of the Web Animations API returns a new `AnimationPlaybackEvent` object instance.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `cancel`, `finish`, or `remove`.


`options` Optional

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

`detail` Optional

An event-dependent value associated with the event. Defaults to `null`.


### Return value

A new `AnimationPlaybackEvent` object.

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

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-animationplaybackevent |

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

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

See also
--------

* Web Animations API
* `AnimationPlayBackEvent`
* `Animation.playState`
* `CustomEvent()`
* `Event()`
AnimationPlaybackEvent: currentTime property
============================================

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 **`currentTime`** read-only property of the `AnimationPlaybackEvent` interface represents the current time of the animation that generated the event at the moment the event is queued. This will be unresolved if the animation was `idle` at the time the event was generated.

Value
-----

A number representing the current time in milliseconds, or `null`.

Reduced time precision
----------------------

 To offer protection against timing attacks and fingerprinting, the precision of `playbackEvent.currentTime` might get rounded depending on browser settings.
 In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 20 µs in Firefox 59; in 60, it will be 2 ms.


```js
// reduced time precision (2ms) in Firefox 60
playbackEvent.currentTime;
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
playbackEvent.currentTime;
// 49.8
// 50.6
// 51.7
// …
```


In Firefox, you can also enabled `privacy.resistFingerprinting`, the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

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

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-currenttime |

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

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

See also
--------

* Web Animations API
* `AnimationPlayBackEvent`