spec:css-ui-4; type:property; text:pointer-events

spec:css-viewport; type:dfn;

text:effective zoom

text:layout viewport

text:scale factor

text:visual viewport

spec:css2; type:dfn;

text: viewport

spec:dom; type:dfn; text:parent element

spec:html; type:dfn;

text: inert

text: the body element

text: rules for parsing integers

text: being rendered

spec:html; type:element; text:body

spec:css-overflow-3; type:property; text:scroll-behavior

spec:css-overflow-3; type:value; text:smooth

spec:css-overflow-3; type:value; text:auto

spec:css2; type:dfn; for:/; text:media

spec:css-scoping-1; type:dfn; text:shadow root

spec:dom; type:dfn; text:host

spec:dom; type:dfn; text:element

spec:dom; type:dfn; for:Attr; text:element

spec:css-borders-4; type:property; text:border-top-width

spec:css-borders-4; type:property; text:border-left-width

spec:css-borders-4; type:property; text:border-right-width

spec:css-borders-4; type:property; text:border-bottom-width

spec:cssom-view-1; type:dictionary; text:MouseEventInit

spec:cssom-view-1; type:dfn; for:MediaQueryList; text:media

spec:webdriver-bidi; type:dfn;

text:WebDriver BiDi emulated available screen area

text:WebDriver BiDi emulated total screen area

main .atrisk::before {

float: right;

margin-top: -0.25em;

padding: 0.5em 1em 0.5em 0;

text-indent: -0.9em;

border: 1px solid;

content: '\25C0 Not yet widely implemented';

white-space: pre;

font-size: small;

background-color: white;

color: gray;

text-align: center;

}

.selected-text-file-an-issue {

position: fixed;

bottom: 0;

right: 0;

background: rgba(255, 255, 255, 0.8);

font-size: smaller;

padding: 4px 10px;

z-index: 1;

text-decoration: underline;

}

@media (max-width: 767px) {

.selected-text-file-an-issue { left: 0; right: auto; text-align: left; }

}

Many of the features defined in this specification have been supported

by browsers for a long period of time. The goal of this specification is

to define these features in such a way that they can be implemented by all

browsers in an interoperable manner. The specification also defines a

some new features which allow for scroll customization.

idlharness.html

Terminology used in this specification is from

DOM,

CSSOM and

HTML.

An element <var>body</var> (which will be <a>the <code>body</code> element</a>) is

<dfn>potentially scrollable</dfn> in an axis

if all of the following conditions are true:

* <var>body</var> has an associated [=CSS/box=].

* <var>body</var>'s <a>parent element</a>'s computed value of the 'overflow-x' or 'overflow-y' properties (whichever is in the given axis) is neither ''overflow/visible'' nor ''overflow/clip''.

* <var>body</var>'s computed value of the 'overflow-x' or 'overflow-y' properties (whichever is in the given axis) is neither ''overflow/visible'' nor ''overflow/clip''.

Note: A <{body}> element that is <a>potentially scrollable</a> might not have a <a>scrolling box</a>.

For instance, it could have a used value of 'overflow' being ''overflow/auto'' but not have its content overflowing its content area.

A <dfn export>scrolling box</dfn> of a <a>viewport</a> or element has two <dfn>overflow directions</dfn>, which are the <a>block-end</a> and <a>inline-end</a> directions for that viewport or element.

Note that the initial scroll position might not be aligned with the [=scrolling area origin=]

depending on the [=content-distribution properties=], see [[css-align-3#overflow-scroll-position]].

The term <dfn export>scrolling area</dfn> refers to a box of a [=viewport=] or an element that has

the following edges, depending on the [=viewport=]’s or element's [=scrolling box=]’s [=overflow directions=].

<thead>

<tr>

<th>If the <a>overflow directions</a> are&hellip;

<th>For a <a>viewport</a>

<th>For an element

<tbody>

<tr>

<td>rightward and downward

<td class=long>

<dl>

<dt>top edge

<dd>The top edge of the <a>initial containing block</a>.

<dt>right edge

<dd>The right-most edge of the right edge of the <a>initial containing block</a> and the right

<a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

<dt>bottom edge

<dd>The bottom-most edge of the bottom edge of the <a>initial containing block</a> and the

bottom <a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

<dt>left edge

<dd>The left edge of the <a>initial containing block</a>.

</dl>

<td class=long>

<dl>

<dt>top edge

<dd>The element's top <a>padding edge</a>.

<dt>right edge

<dd>The right-most edge of the element's right <a>padding edge</a> and the right <a>margin

edge</a> of all of the element's descendants' boxes,

excluding boxes that have an ancestor of the element as their containing block.

<dt>bottom edge

<dd>The bottom-most edge of the element's bottom <a>padding edge</a> and the bottom <a>margin

edge</a> of all of the element's descendants'

boxes, excluding boxes that have an ancestor of the element as their containing block.

<dt>left edge

<dd>The element's left <a>padding edge</a>.

</dl>

<tr>

<td>leftward and downward

<td class=long>

<dl>

<dt>top edge

<dd>The top edge of the <a>initial containing block</a>.

<dt>right edge

<dd>The right edge of the <a>initial containing block</a>.

<dt>bottom edge

<dd>The bottom-most edge of the bottom edge of the <a>initial containing block</a> and the

bottom <a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

<dt>left edge

<dd>The left-most edge of the left edge of the <a>initial containing block</a> and the left

<a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

</dl>

<td class=long>

<dl>

<dt>top edge

<dd>The element's top <a>padding edge</a>.

<dt>right edge

<dd>The element's right <a>padding edge</a>.

<dt>bottom edge

<dd>The bottom-most edge of the element's bottom <a>padding edge</a> and the bottom <a>margin

edge</a> of all of the element's descendants' boxes, excluding boxes that have an ancestor of

the element as their containing block.

<dt>left edge

<dd>The left-most edge of the element's left <a>padding edge</a> and the left <a>margin

edge</a> of all of the element's descendants' boxes, excluding boxes that have an ancestor of

the element as their containing block.

</dl>

<tr>

<td>leftward and upward

<td class=long>

<dl>

<dt>top edge

<dd>The top-most edge of the top edge of the <a>initial containing block</a> and the top

<a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

<dt>right edge

<dd>The right edge of the <a>initial containing block</a>.

<dt>bottom edge

<dd>The bottom edge of the <a>initial containing block</a>.

<dt>left edge

<dd>The left-most edge of the left edge of the <a>initial containing block</a> and the left

<a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

</dl>

<td class=long>

<dl>

<dt>top edge

<dd>The top-most edge of the element's top <a>padding edge</a> and the top <a>margin edge</a>

of all of the element's descendants' boxes, excluding boxes that have an ancestor of the

element as their containing block.

<dt>right edge

<dd>The element's right <a>padding edge</a>.

<dt>bottom edge

<dd>The element's bottom <a>padding edge</a>.

<dt>left edge

<dd>The left-most edge of the element's left <a>padding edge</a> and the left <a>margin

edge</a> of all of the element's descendants' boxes, excluding boxes that have an ancestor of

the element as their containing block.

</dl>

<tr>

<td>rightward and upward

<td class=long>

<dl>

<dt>top edge

<dd>The top-most edge of the top edge of the <a>initial containing block</a> and the top

<a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

<dt>right edge

<dd>The right-most edge of the right edge of the <a>initial containing block</a> and the right

<a>margin edge</a> of all of the <a>viewport’s</a> descendants' boxes.

<dt>bottom edge

<dd>The bottom edge of the <a>initial containing block</a>.

<dt>left edge

<dd>The left edge of the <a>initial containing block</a>.

</dl>

<td class=long>

<dl>

<dt>top edge

<dd>The top-most edge of the element's top <a>padding edge</a> and the top <a>margin edge</a>

of all of the element's descendants' boxes, excluding boxes that have an ancestor of the

element as their containing block.

<dt>right edge

<dd>The right-most edge of the element's right <a>padding edge</a> and the right <a>margin

edge</a> of all of the element's descendants' boxes, excluding boxes that have an ancestor of

the element as their containing block.

<dt>bottom edge

<dd>The element's bottom <a>padding edge</a>.

<dt>left edge

<dd>The element's left <a>padding edge</a>.

</dl>

The <dfn lt="scrolling area origin">origin</dfn> of a <a>scrolling area</a> is

the origin of the <a>initial containing block</a> if the <a>scrolling area</a> is a <a>viewport</a>,

and otherwise the top left padding edge of the element when the element has its default scroll position.

The x-coordinate increases rightwards, and the y-coordinate increases downwards.

The <dfn>beginning edges</dfn> of a particular set of edges of a box or element are the following edges:

<dt>If the <a>overflow directions</a> are rightward and downward

<dd>The top and left edges.

<dt>If the <a>overflow directions</a> are leftward and downward

<dd>The top and right edges.

<dt>If the <a>overflow directions</a> are leftward and upward

<dd>The bottom and right edges.

<dt>If the <a>overflow directions</a> are rightward and upward

<dd>The bottom and left edges.

The <dfn>ending edges</dfn> of a particular set of edges of a box or element are the following edges:

<dt>If the <a>overflow directions</a> are rightward and downward

<dd>The bottom and right edges.

<dt>If the <a>overflow directions</a> are leftward and downward

<dd>The bottom and left edges.

<dt>If the <a>overflow directions</a> are leftward and upward

<dd>The top and left edges.

<dt>If the <a>overflow directions</a> are rightward and upward

<dd>The top and right edges.

The {{VisualViewport}} object has an <dfn>associated document</dfn>, which is a {{Document}} object.

It is the [=associated document=] of the owner {{Window}} of {{VisualViewport}}. The [=layout viewport=]

is the owner {{Window}}'s [=viewport=].

For the purpose of the requirements in this specification,

elements that have a computed value of the 'display' property

that is ''table-column'' or ''table-column-group''

must be considered to have an associated [=CSS/box=]

(the column or column group, respectively).

The term <dfn>SVG layout box</dfn> refers to a [=CSS/box=] generated by an SVG element

which does not correspond to a CSS-defined 'display' type.

(Such as the [=CSS/box=] generated by a <{rect}> element.)

The term <dfn noexport>transforms</dfn> refers to SVG transforms and CSS transforms. [[!SVG11]] [[!CSS-TRANSFORMS-1]]

When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that

e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.

Unless otherwise stated, all string comparisons use [=string/is=].

All coordinates and dimensions for the APIs defined in this

specification are in <a lt=px value>CSS pixels</a>, unless otherwise specified. [[!CSS-VALUES]]

Note: This does not apply to e.g. {{matchMedia()}} as the units are explicitly given there.

There are two kinds of zoom, <dfn>page zoom</dfn> which affects the size of the initial viewport<!-- XXX ref -->, and the visual viewport <a>scale factor</a> which acts like

a magnifying glass and does not affect the initial viewport<!-- XXX ref --> or actual viewport<!-- XXX ref -->. [[!CSS-DEVICE-ADAPT]]

Note: The "scale factor" is often referred to as "pinch-zoom"; however, it can be affected through means other than

pinch-zooming. e.g. The user agent may zooms in on a focused input element to make it legible.

User agents may choose to hide information about the screen of the output device, in order to

protect the user's privacy. In order to do so in a consistent manner across APIs, this specification

defines the following terms, each having a width and a height, the origin being the top left

corner, and the x- and y-coordinates increase rightwards and downwards, respectively.

The <dfn export>Web-exposed screen area</dfn> must return the result of the following algorithm:

1. Let <var>target</var> be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].

1. Let |emulated screen area| be the <a>WebDriver BiDi emulated total screen area</a> of <var>target</var>.

1. If |emulated screen area| is not null, return |emulated screen area|.

1. Otherwise, return one of the following:

* The area of the output device, in <a lt=px value>CSS pixels</a>.

* The area of the <a>viewport</a>, in <a lt=px value>CSS pixels</a>.

The <dfn export>Web-exposed available screen area</dfn> must return the result of the following algorithm:

1. Let <var>target</var> be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].

1. Let |emulated screen area| be the <a>WebDriver BiDi emulated available screen area</a> for <var>target</var>.

1. If |emulated screen area| is not null, return |emulated screen area|.

1. Otherwise, return one of the following:

* The available area of the rendering surface of the output device, in <a lt=px value>CSS pixels</a>.

* The area of the output device, in <a lt=px value>CSS pixels</a>.

* The area of the <a>viewport</a>, in <a lt=px value>CSS pixels</a>.

This specification depends on the WHATWG Infra standard. [[!INFRA]]

A <dfn>non-interrupted scroll result</dfn> is a {{ScrollResult}} dictionary whose {{ScrollResult/interrupted}} member is false.

An <dfn>interrupted scroll result</dfn> is a {{ScrollResult}} dictionary whose {{ScrollResult/interrupted}} member is true.

When a user agent is to <dfn export>perform a scroll</dfn> of a <a>scrolling box</a> <var>box</var>,

to a given position <var>position</var>,

an associated element or [=pseudo-element=] <var>element</var> and optionally a scroll behavior <var>behavior</var>

(which is "<code>auto</code>" if omitted),

the following steps must be run:

1. <a lt="smooth scroll aborted">Abort</a> any ongoing <a>smooth scroll</a> for <var>box</var>.

1. Resolve all pending scroll {{Promise}}s whose scroll container is <var>box</var> with an [=interrupted scroll result=].

1. Let <var>scrollPromise</var> be a new {{Promise}}.

1. Return <var>scrollPromise</var>, and run the remaining steps <a>in parallel</a>.

1. If the user agent honors the 'scroll-behavior' property and one of the following is true:

<ul>

<li><var>behavior</var> is "<code>auto</code>" and <var>element</var> is not null and its computed value of the

'scroll-behavior' property is ''scroll-behavior/smooth'', or

<li><var>behavior</var> is <code>smooth</code>

</ul>

then perform a <a>smooth scroll</a> of <var>box</var> to <var>position</var>;

otherwise, perform an <a>instant scroll</a> of <var>box</var> to <var>position</var>.

1. Wait until either the position has finished updating, or <var>scrollPromise</var> has been resolved.

1. If <var>scrollPromise</var> is still in the pending state:

1. If the scroll position changed as a result of this call, emit the <a event>scrollend</a> event.

1. Resolve <var>scrollPromise</var> with a [=non-interrupted scroll result=].

Note: <code>behavior: "instant"</code> always performs an <a>instant scroll</a> by this algorithm.

Note: If the scroll position did not change as a result of the user interaction or programmatic invocation, where no translations were applied as a result, then no <a event>scrollend</a> event fires because no scrolling occurred.

When a user agent is to <dfn for="viewport" export>perform a scroll</dfn> of a <a>viewport</a> to a given position <var>position</var> and optionally a scroll behavior <var>behavior</var>

(which is "<code>auto</code>" if omitted) it must perform a coordinated viewport scroll by following these steps:

1. Let <var>doc</var> be the <a>viewport's</a> associated {{Document}}.

1. Let <var>vv</var> be the {{VisualViewport}} whose <a for=visualviewport>associated document</a> is <var>doc</var>.

1. Let <var>maxX</var> be the difference between <a>viewport</a>'s <a>scrolling box</a>'s width and the value of <var>vv</var>'s <a attribute

for=VisualViewport lt=width>width</a> attribute.

1. Let <var>maxY</var> be the difference between <a>viewport</a>'s <a>scrolling box</a>'s height and the value of <var>vv</var>'s <a attribute

for=VisualViewport lt=height>height</a> attribute.

1. Let <var>dx</var> be the horizontal component of <var>position</var> - the value <var>vv</var>'s <a attribute for=VisualViewport lt=pageLeft>pageLeft</a> attribute

1. Let <var>dy</var> be the vertical component of <var>position</var> - the value of <var>vv</var>'s <a attribute for=VisualViewport lt=pageTop>pageTop</a> attribute

1. Let <var>visual x</var> be the value of <var>vv</var>'s <a attribute for=VisualViewport lt=offsetLeft>offsetLeft</a> attribute.

1. Let <var>visual y</var> be the value of <var>vv</var>'s <a attribute for=VisualViewport lt=offsetTop>offsetTop</a> attribute.

1. Let <var>visual dx</var> be min(<var>maxX</var>, max(0, <var>visual x</var> + <var>dx</var>)) - <var>visual x</var>.

1. Let <var>visual dy</var> be min(<var>maxY</var>, max(0, <var>visual y</var> + <var>dy</var>)) - <var>visual y</var>.

1. Let <var>layout dx</var> be <var>dx</var> - <var>visual dx</var>

1. Let <var>layout dy</var> be <var>dy</var> - <var>visual dy</var>

1. Let <var>element</var> be <var>doc</var>'s root element if there is one, null otherwise.

1. <a for="/">Perform a scroll</a> of the <a>viewport</a>'s <a>scrolling box</a> to its current scroll position + (<var>layout dx</var>, <var>layout dy</var>) with <var>element</var> as the

associated element, and <var>behavior</var> as the scroll behavior.

Let <var>scrollPromise1</var> be the {{Promise}} returned from this step.

1. <a for="/">Perform a scroll</a> of <var>vv</var>'s <a>scrolling box</a> to its current scroll position + (<var>visual dx</var>, <var>visual dy</var>) with <var>element</var> as the associated

element, and <var>behavior</var> as the scroll behavior.

Let <var>scrollPromise2</var> be the {{Promise}} returned from this step.

1. Let <var>scrollPromise</var> be a new {{Promise}}.

1. Return <var>scrollPromise</var>, and run the remaining steps <a>in parallel</a>.

1. Wait until both <var>scrollPromise1</var> and <var>scrollPromise2</var> have settled.

1. If <var>scrollPromise1</var> and <var>scrollPromise2</var> were both resolved with a [=non-interrupted scroll result=],

resolve <var>scrollPromise</var> with a [=non-interrupted scroll result=].

1. Otherwise, resolve <var>scrollPromise</var> with an [=interrupted scroll result=].

Note: Conceptually, the visual viewport is scrolled until it "bumps up" against the layout viewport

edge and then "pushes" the layout viewport by applying the scroll delta to the layout viewport.

However, the scrolls in the steps above are computed ahead of time and applied in the opposite order

so that the layout viewport is scrolled before the visual viewport. This is done for historical

reasons to ensure consistent scroll event ordering. See the

<a href="https://drafts.csswg.org/css-viewport/#example-vvanimation">example</a> for a visual depiction.

The user pinch-zooms into the document and ticks their mouse wheel, requesting the user agent scroll the document down by 50px. Because the document

is pinch-zoomed in, the visual viewport has 20px of room to scroll. The user agent distributes the scroll by scrolling the visual viewport down by

20px and the layout viewport by 30px.

The user is viewing a document in a mobile user agent. The document focuses an offscreen text input element, showing a virtual keyboard which shrinks

the visual viewport. The user agent must now bring the element into view in the visual viewport. The user agent scrolls the layout viewport so that

the element is visible within it, then the visual viewport so that the element is visible to the user.

Scroll is <dfn lt="scroll completed">completed</dfn> when the scroll position has no more pending updates or translations and the user has completed their gesture. Scroll position updates include smooth or instant mouse wheel scrolling, keyboard scrolling, scroll-snap events, or other APIs and gestures which cause the scroll position to update and possibly interpolate. User gestures like touch panning or trackpad scrolling aren't complete until pointers or keys have released.

When a user agent is to perform a <dfn export id=concept-smooth-scroll>smooth scroll</dfn> of a <a>scrolling box</a> <var>box</var> to <var>position</var>,

it must update the scroll position of <var>box</var> in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is

<dfn export lt="smooth scroll completed">completed</dfn>, the scroll position of <var>box</var> must be <var>position</var>. The scroll can also

be <dfn export lt="smooth scroll aborted">aborted</dfn>, either by an algorithm or by the user. <!--fingerprint-->

When a user agent is to perform an <dfn id=concept-instant-scroll>instant scroll</dfn> of a <a>scrolling box</a> <var>box</var> to

<var>position</var>, it must update the scroll position of <var>box</var> to <var>position</var>.

To <dfn export>scroll to the beginning of the document</dfn> for a document <var>document</var>, follow these steps:

<li>Let <var>viewport</var> be the <a>viewport</a> that is associated with <var>document</var>. <!-- This assumes that there is a viewport, since

it is only invoked when navigating -->

<li>Let <var>position</var> be the scroll position <var>viewport</var> would have by aligning the <a>beginning edges</a> of the

<a>scrolling area</a> with the <a>beginning edges</a> of <var>viewport</var>.

<li>If <var>position</var> is the same as <var>viewport</var>'s current scroll position, and <var>viewport</var> does not have an ongoing

<a>smooth scroll</a>, abort these steps.

<li><a for="viewport">Perform a scroll</a> of <var>viewport</var> to <var>position</var>,

and <var>document</var>'s [=root element=] as the associated element, if there is one, or null otherwise.

Note: This algorithm is used when navigating to the <code>#top</code> fragment identifier, as defined in HTML. [[!HTML]]

interrupt-hidden-smooth-scroll.html

long_scroll_composited.html

scroll-back-to-initial-position.html

scrolling-no-browsing-context.html

scrolling-quirks-vs-nonquirks.html

smooth-scroll-in-load-event.html

smooth-scroll-nonstop.html

When asked to <dfn>normalize non-finite values</dfn> for a value <var>x</var>,

if <var>x</var> is one of the three special floating point literal values

(<code>Infinity</code>, <code>-Infinity</code> or <code>NaN</code>),

then <var>x</var> must be changed to the value <code>0</code>. [[!WEBIDL]]

enum ScrollBehavior { "auto", "instant", "smooth" };

dictionary ScrollOptions {

ScrollBehavior behavior = "auto";

};

dictionary ScrollToOptions : ScrollOptions {

unrestricted double left;

unrestricted double top;

};

dictionary ScrollResult {

required boolean interrupted;

};

partial interface Window {

[NewObject] MediaQueryList matchMedia(CSSOMString query);

[SameObject, Replaceable] readonly attribute Screen screen;

[SameObject, Replaceable] readonly attribute VisualViewport? visualViewport;

// browsing context

undefined moveTo(long x, long y);

undefined moveBy(long x, long y);

undefined resizeTo(long width, long height);

undefined resizeBy(long x, long y);

// viewport

[Replaceable] readonly attribute long innerWidth;

[Replaceable] readonly attribute long innerHeight;

// viewport scrolling

[Replaceable] readonly attribute double scrollX;

[Replaceable] readonly attribute double pageXOffset;

[Replaceable] readonly attribute double scrollY;

[Replaceable] readonly attribute double pageYOffset;

Promise&lt;ScrollResult> scroll(optional ScrollToOptions options = {});

Promise&lt;ScrollResult> scroll(unrestricted double x, unrestricted double y);

Promise&lt;ScrollResult> scrollTo(optional ScrollToOptions options = {});

Promise&lt;ScrollResult> scrollTo(unrestricted double x, unrestricted double y);

Promise&lt;ScrollResult> scrollBy(optional ScrollToOptions options = {});

Promise&lt;ScrollResult> scrollBy(unrestricted double x, unrestricted double y);

// client

[Replaceable] readonly attribute long screenX;

[Replaceable] readonly attribute long screenLeft;

[Replaceable] readonly attribute long screenY;

[Replaceable] readonly attribute long screenTop;

[Replaceable] readonly attribute long outerWidth;

[Replaceable] readonly attribute long outerHeight;

[Replaceable] readonly attribute double devicePixelRatio;

};

When the <dfn method for=Window caniuse=matchmedia>matchMedia(<var>query</var>)</dfn> method is invoked these steps must be run:

<li>Let <var>parsed media query list</var> be the result of

<a lt='parse a media query list'>parsing</a>

<var>query</var>.

<li>Return a new {{MediaQueryList}} object,

with [=this=]'s

<a for="/">associated <code>Document</code></a>

as the <a for=MediaQueryList>document</a>,

with <var>parsed media query list</var> as its associated [=MediaQueryList/media query list=].

matchMedia-display-none-iframe.html

matchMedia.html

The <dfn attribute for=Window>screen</dfn> attribute must return the {{Screen}} object

associated with the {{Window}} object.

Note: Accessing {{Window/screen}} through a {{WindowProxy}} object might yield different

results when the {{Document}} is navigated.

If the <a for="/">associated document</a> is <a>fully active</a>, the <dfn attribute for=Window>visualViewport</dfn>

attribute must return the {{VisualViewport}} object associated with the {{Window}} object's <a for="/">associated

document</a>. Otherwise, it must return null.

Note: the VisualViewport object is only returned and useful for a window whose Document is currently being presented. If

a reference is retained to a VisualViewport whose associated Document is not being currently presented, the values in

that VisualViewport must not reveal any information about the browsing context.

window-screen-height-immutable.html

window-screen-height.html

window-screen-width-immutable.html

window-screen-width.html

The <dfn method for=Window>moveTo(<var>x</var>, <var>y</var>)</dfn> method must follow these steps:

1. Optionally, return.

1. Let <var>target</var> be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].

1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.

1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is <code>true</code>, then return.

1. Optionally, clamp <var>x</var> and <var>y</var> in a user-agent-defined manner so that the window does not move outside the available space.

1. Move <var>target</var>’s window such that the window’s top left corner is at coordinates (<var>x</var>, <var>y</var>) relative to the top left corner of the output device, measured in <a lt=px value>CSS pixels</a> of <var>target</var>. The positive axes are rightward and downward.

The <dfn method for=Window>moveBy(<var>x</var>, <var>y</var>)</dfn> method must follow these steps:

1. Optionally, return.

1. Let <var>target</var> be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].

1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.

1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is <code>true</code>, then return.

1. Optionally, clamp <var>x</var> and <var>y</var> in a user-agent-defined manner so that the window does not move outside the available space.

1. Move <var>target</var>'s window <var>x</var> <a lt=px value>CSS pixels</a> of <var>target</var> rightward and <var>y</var> <a lt=px value>CSS pixels</a> of <var>target</var> downward.

The <dfn method for=Window>resizeTo(<var>width</var>, <var>height</var>)</dfn> method must follow these steps:

1. Optionally, return.

1. Let <var>target</var> be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].

1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.

1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is <code>true</code>, then:

1. If [=this=]'s [=relevant global object=] does not have [=transient activation=], throw a "{{NotAllowedError}}" {{DOMException}}.

1. [=Consume user activation=] given [=this=]'s [=relevant global object=].

1. Optionally, clamp <var>width</var> and <var>height</var> in a user-agent-defined manner so that the window does not get too small or bigger than the available space.

1. Resize <var>target</var>'s window by moving its right and bottom edges such that the distance between the left and right edges of the viewport are <var>width</var> <a lt=px value>CSS pixels</a> of <var>target</var> and the distance between the top and bottom edges of the viewport are <var>height</var> <a lt=px value>CSS pixels</a> of <var>target</var>.

1. Optionally, move <var>target</var>'s window in a user-agent-defined manner so that it does not grow outside the available space.

resizeTo-negative.html

The <dfn method for=Window>resizeBy(<var>x</var>, <var>y</var>)</dfn> method must follow these steps:

1. Optionally, return.

1. Let <var>target</var> be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].

1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.

1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is <code>true</code>, then:

1. If [=this=]'s [=relevant global object=] does not have [=transient activation=], throw a "{{NotAllowedError}}" {{DOMException}}.

1. [=Consume user activation=] given [=this=]'s [=relevant global object=].

1. Optionally, clamp <var>x</var> and <var>y</var> in a user-agent-defined manner so that the window does not get too small or bigger than the available space.

1. Resize <var>target</var>'s window by moving its right edge <var>x</var> <a lt=px value>CSS pixels</a> of <var>target</var> rightward and its bottom edge <var>y</var> <a lt=px value>CSS pixels</a> of <var>target</var> downward.

1. Optionally, move <var>target</var>'s window in a user-agent-defined manner so that it does not grow outside the available space.

The <dfn attribute for=Window>innerWidth</dfn> attribute must return the <a>viewport</a> width including the size of a rendered

scroll bar (if any), or zero if there is no <a>viewport</a>. <!--fingerprint-->

The following snippet shows how to obtain the width of the viewport:

<pre>var viewportWidth = innerWidth</pre>

The <dfn attribute for=Window>innerHeight</dfn> attribute must return the <a>viewport</a> height including the size of a rendered

scroll bar (if any), or zero if there is no <a>viewport</a>. <!--fingerprint-->

The <dfn attribute for=Window>scrollX</dfn> attribute must return the x-coordinate,

relative to the <a>initial containing block</a> origin,

of the left of the <a>viewport</a>,

or zero if there is no <a>viewport</a>. <!--fingerprint-->

The <dfn attribute for=Window>pageXOffset</dfn> attribute must return the value returned by the {{scrollX}} attribute.

The <dfn attribute for=Window>scrollY</dfn> attribute must return the y-coordinate,

relative to the <a>initial containing block</a> origin,

of the top of the <a>viewport</a>,

or zero if there is no <a>viewport</a>. <!--fingerprint-->

The <dfn attribute for=Window>pageYOffset</dfn> attribute must return the value returned by the {{scrollY}} attribute.

When the <dfn method for=Window lt="scroll(options)|scroll(x, y)">scroll()</dfn> method is invoked these

steps must be run:

1. If invoked with one argument, follow these substeps:

1. Let <var>options</var> be the argument.

1. Let <var>x</var> be the value of the {{ScrollToOptions/left}} dictionary member of <var>options</var>, if present,

or the <a>viewport’s</a> current scroll position on the x axis otherwise.

1. Let <var>y</var> be the value of the {{ScrollToOptions/top}} dictionary member of <var>options</var>, if present,

or the <a>viewport’s</a> current scroll position on the y axis otherwise.

1. If invoked with two arguments, follow these substeps:

1. Let <var>options</var> be null <a lt="converted to an IDL value">converted</a> to a {{ScrollToOptions}} dictionary. [[!WEBIDL]]

1. Let <var>x</var> and <var>y</var> be the arguments, respectively.

1. <a>Normalize non-finite values</a> for <var>x</var> and <var>y</var>.

1. If there is no <a>viewport</a>, return [=a promise resolved with=] a [=non-interrupted scroll result=] and abort the remaining steps.

1. Let <var>viewport width</var> be the width of the <a>viewport</a> excluding the width of the scroll bar, if any.

1. Let <var>viewport height</var> be the height of the <a>viewport</a> excluding the height of the scroll bar, if any.

1.

<dl class=switch>

<dt>If the <a>viewport</a> has rightward <a>overflow direction</a>

<dd>Let <var>x</var> be max(0, min(<var>x</var>, <a>viewport</a> <a>scrolling area</a> width - <var>viewport width</var>)).

<dt>If the <a>viewport</a> has leftward <a>overflow direction</a>

<dd>Let <var>x</var> be min(0, max(<var>x</var>, <var>viewport width</var> - <a>viewport</a> <a>scrolling area</a> width)).

</dl>

1.

<dl class=switch>

<dt>If the <a>viewport</a> has downward <a>overflow direction</a>

<dd>Let <var>y</var> be max(0, min(<var>y</var>, <a>viewport</a> <a>scrolling area</a> height - <var>viewport height</var>)).

<dt>If the <a>viewport</a> has upward <a>overflow direction</a>

<dd>Let <var>y</var> be min(0, max(<var>y</var>, <var>viewport height</var> - <a>viewport</a> <a>scrolling area</a> height)).

</dl>

1. Let <var>position</var> be the scroll position the <a>viewport</a> would have

by aligning the x-coordinate <var>x</var> of the <a>viewport</a> <a>scrolling area</a>

with the left of the <a>viewport</a>

and aligning the y-coordinate <var>y</var> of the <a>viewport</a> <a>scrolling area</a>

with the top of the <a>viewport</a>.

1. If <var>position</var> is the same as the <a>viewport’s</a> current scroll position,

and the <a>viewport</a> does not have an ongoing <a>smooth scroll</a>, return [=a promise resolved with=] a [=non-interrupted scroll result=] and abort the remaining steps.

1. Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.

1. <a for="viewport">Perform a scroll</a> of the <a>viewport</a> to <var>position</var>,

<var>document</var>'s [=root element=] as the associated element, if there is one, or null otherwise,

and the scroll behavior being the value of the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.

Let <var>scrollPromise</var> be the {{Promise}} returned from this step.

1. Return <var>scrollPromise</var>.

Issue: User agents do not agree whether this uses the (coordinated) <a>viewport</a> <a for="viewport">perform a scroll</a> or the

<a>scrolling box</a> <a for="/">perform a scroll</a> on the layout viewport's scrolling box.

add-background-attachment-fixed-during-smooth-scroll.html

HTMLBody-ScrollArea_quirksmode.html

window-scroll-arguments.html

window-scroll-promise-interruption.html

window-scroll-promises.html

When the <dfn method for=Window lt="scrollTo(options)|scrollTo(x, y)">scrollTo()</dfn> method is invoked, the

user agent must act as if the {{Window/scroll()}} method was invoked with the same arguments.

background-change-during-smooth-scroll.html

scrollTo-zoom.html

When the <dfn method for=Window lt="scrollBy(options)|scrollBy(x, y)">scrollBy()</dfn> method is invoked, the

user agent must run these steps:

1. If invoked with two arguments, follow these substeps:

1. Let <var>options</var> be null <a lt="converted to an IDL value">converted</a> to a {{ScrollToOptions}} dictionary. [[!WEBIDL]]

1. Let <var>x</var> and <var>y</var> be the arguments, respectively.

1. Let the {{ScrollToOptions/left}} dictionary member of <var>options</var> have the value <var>x</var>.

1. Let the {{ScrollToOptions/top}} dictionary member of <var>options</var> have the value <var>y</var>.

1. <a>Normalize non-finite values</a> for the {{ScrollToOptions/left}} and {{ScrollToOptions/top}} dictionary members of <var>options</var>.

1. Add the value of {{scrollX}} to the {{ScrollToOptions/left}} dictionary member.

1. Add the value of {{scrollY}} to the {{ScrollToOptions/top}} dictionary member.

1. Return the {{Promise}} returned from {{Window/scroll()}} after the method is invoked with <var>options</var> as the only argument.

The <dfn attribute for=Window>screenX</dfn> and <dfn attribute for=Window>screenLeft</dfn> attributes must return the x-coordinate,

relative to the origin of the <a>Web-exposed screen area</a>, of the left of

the client window as number of <a lt=px value>CSS pixels</a>, or zero if there is no such

thing. <!--fingerprint-->

screenLeftTop.html

The <dfn attribute for=Window>screenY</dfn> and <dfn attribute for=Window>screenTop</dfn> attributes must return the y-coordinate,

relative to the origin of the screen of the <a>Web-exposed screen area</a>, of the top of

the client window as number of <a lt=px value>CSS pixels</a>, or zero if there is no such

thing. <!--fingerprint-->

The <dfn attribute for=Window>outerWidth</dfn> attribute must return the width of the

client window. If there is no client window this

attribute must return zero. <!--fingerprint-->

The <dfn attribute for=Window>outerHeight</dfn> attribute must return the height of the

client window. If there is no client window this

attribute must return zero. <!--fingerprint-->

The <dfn attribute for=Window caniuse=devicepixelratio>devicePixelRatio</dfn> attribute must return the result of the following <dfn export>determine the device pixel ratio</dfn> algorithm:

1. If there is no output device, return 1 and abort these steps.

1. Let <var>CSS pixel size</var> be the size of a <a lt=px value>CSS pixel</a> at the current <a>page zoom</a> and using a <a>scale factor</a> of 1.0.

1. Let <var>device pixel size</var> be the vertical size of a device pixel of the output device.

1. Return the result of dividing <var>CSS pixel size</var> by <var>device pixel size</var>.

HTML defines the {{Window/open()}} method. This section defines behavior for position and size given

in the <var ignore>features</var> argument. [[!HTML]]

To <dfn export>set up browsing context features</dfn> for a browsing context <var>target</var> given a

<a>map</a> <var>tokenizedFeatures</var>:

1. Let <var>x</var> be null.

1. Let <var>y</var> be null.

1. Let <var>width</var> be null.

1. Let <var>height</var> be null.

1. If <var>tokenizedFeatures</var>["<a for="supported open() feature name">left</a>"]

<a for=map>exists</a>:

1. Set <var>x</var> to the result of invoking the <a>rules for parsing integers</a> on

<var>tokenizedFeatures</var>["<a for="supported open() feature name">left</a>"].

1. If <var>x</var> is an error, set <var>x</var> to 0.

1. Optionally, clamp <var>x</var> in a user-agent-defined manner so that the window does not

move outside the <a>Web-exposed available screen area</a>.

1. Optionally, move <var>target</var>'s window such that the window's left edge is at the

horizontal coordinate <var>x</var> relative to the left edge of the <a>Web-exposed screen

area</a>, measured in <a lt=px value>CSS pixels</a> of <var>target</var>. The positive axis is rightward.

1. If <var>tokenizedFeatures</var>["<a for="supported open() feature name">top</a>"]

<a for=map>exists</a>:

1. Set <var>y</var> to the result of invoking the <a>rules for parsing integers</a> on

<var>tokenizedFeatures</var>["<a for="supported open() feature name">top</a>"].

1. If <var>y</var> is an error, set <var>y</var> to 0.

1. Optionally, clamp <var>y</var> in a user-agent-defined manner so that the window does not

move outside the <a>Web-exposed available screen area</a>.

1. Optionally, move <var>target</var>'s window such that the window's top edge is at the

vertical coordinate <var>y</var> relative to the top edge of the <a>Web-exposed screen

area</a>, measured in <a lt=px value>CSS pixels</a> of <var>target</var>. The positive axis is downward.

1. If <var>tokenizedFeatures</var>["<a for="supported open() feature name">width</a>"]

<a for=map>exists</a>:

1. Set <var>width</var> to the result of invoking the <a>rules for parsing integers</a> on

<var>tokenizedFeatures</var>["<a for="supported open() feature name">width</a>"].

1. If <var>width</var> is an error, set <var>width</var> to 0.

1. If <var>width</var> is not 0:

1. Optionally, clamp <var>width</var> in a user-agent-defined manner so that the window does

not get too small or bigger than the <a>Web-exposed available screen area</a>.

1. Optionally, size <var>target</var>'s window by moving its right edge such that the

distance between the left and right edges of the viewport are <var>width</var>

<a lt=px value>CSS pixels</a> of <var>target</var>.

1. Optionally, move <var>target</var>'s window in a user-agent-defined manner so that it

does not grow outside the <a>Web-exposed available screen area</a>.

1. If <var>tokenizedFeatures</var>["<a for="supported open() feature name">height</a>"]

<a for=map>exists</a>:

1. Set <var>height</var> to the result of invoking the <a>rules for parsing integers</a> on

<var>tokenizedFeatures</var>["<a for="supported open() feature name">height</a>"].

1. If <var>height</var> is an error, set <var>height</var> to 0.

1. If <var>height</var> is not 0:

1. Optionally, clamp <var>height</var> in a user-agent-defined manner so that the window

does not get too small or bigger than the <a>Web-exposed available screen area</a>.

1. Optionally, size <var>target</var>'s window by moving its bottom edge such that the

distance between the top and bottom edges of the viewport are <var>height</var>

<a lt=px value>CSS pixels</a> of <var>target</var>.

1. Optionally, move <var>target</var>'s window in a user-agent-defined manner so that it

does not grow outside the <a>Web-exposed available screen area</a>.

A <dfn export>supported <code>open()</code> feature name</dfn> is one of the following:

<dt><dfn>width</dfn>

<dd>The width of the viewport.

<dt><dfn>height</dfn>

<dd>The height of the viewport.

<dt><dfn>left</dfn>

<dd>The left position of the window.

<dt><dfn>top</dfn>

<dd>The top position of the window.

This section integrates with the <a for=/>event loop</a> defined in HTML. [[!HTML]]

A {{MediaQueryList}} object has an associated <dfn for=MediaQueryList>media query list</dfn>

and an associated <dfn for=MediaQueryList>document</dfn> set on creation.

A {{MediaQueryList}} object has an associated <dfn for=MediaQueryList>media</dfn> which is the

<a lt='serialize a media query list'>serialized</a> form of the associated [=MediaQueryList/media query list=].

A {{MediaQueryList}} object has an associated <dfn for=MediaQueryList>matches state</dfn> which is

true if the associated [=MediaQueryList/media query list=] matches the state of the <a for=MediaQueryList>document</a>, and false otherwise.

<!--XXX update the matches state when flushing layout (offsetWidth et al), without firing a change event. -->

When asked to <dfn export>evaluate media queries and report changes</dfn> for a {{Document}} <var>doc</var>, run these steps:

<li>

For each {{MediaQueryList}} object <var>target</var> that has <var>doc</var> as its <a for=MediaQueryList>document</a>,

in the order they were created, oldest first, run these substeps:

<ol>

<li>If <var>target</var>'s <a>matches state</a> has changed since the last time these steps were run,

<a>fire an event</a> named <a event>change</a> at <var>target</var>

using {{MediaQueryListEvent}},

with its {{Event/isTrusted}} attribute initialized to true,

its {{MediaQueryList/media}} attribute initialized to <var>target</var>'s <a>media</a>,

and its {{MediaQueryListEvent/matches}} attribute initialized to <var>target</var>'s <a>matches state</a>. <!--fingerprint-->

</ol>

A simple piece of code that detects changes in the orientation of the viewport can be written as follows:

<pre highlight=javascript>

function handleOrientationChange(event) {

if(event.matches) // landscape

&hellip;

else

&hellip;

}

var mql = matchMedia("(orientation:landscape)");

mql.onchange = handleOrientationChange;

</pre>

interface MediaQueryList : EventTarget {

readonly attribute CSSOMString media;

readonly attribute boolean matches;

undefined addListener(EventListener? callback);

undefined removeListener(EventListener? callback);

attribute EventHandler onchange;

};

The <dfn attribute for=MediaQueryList>media</dfn> attribute must return

the associated <a>media</a>.

The <dfn attribute for=MediaQueryList>matches</dfn> attribute must return

the associated <a>matches state</a>. <!--fingerprint-->

The <dfn method for=MediaQueryList>addListener(<var>callback</var>)</dfn> method,

when invoked, must run these steps:

1. <a spec=dom>Add an event listener</a> with [=this=]

and an <a spec=dom>event listener</a> whose

<a spec=dom for="event listener">type</a> is <code>change</code>,

and <a spec=dom for="event listener">callback</a> is |callback|.

The <dfn method for=MediaQueryList>removeListener(<var>callback</var>)</dfn> method,

when invoked, must run these steps:

1. If [=this=]’s <a spec=dom for=EventTarget>event listener list</a>

<a for=list>contains</a> an <a>event listener</a> whose

<a spec=dom for="event listener">type</a> is <code>change</code>,

<a spec=dom for="event listener">callback</a> is |callback|,

and <a spec=dom for="event listener">capture</a> is false,

then <a spec=dom>remove an event listener</a> with

[=this=] and that <a spec=dom>event listener</a>.

Note: This specification initially had a custom callback mechanism with {{addListener()}} and

{{removeListener()}}, and the callback was invoked with the associated media query list as argument.

Now the normal event mechanism is used instead.

For backwards compatibility, the {{addListener()}} and {{removeListener()}} methods

are basically aliases for {{addEventListener()}} and {{removeEventListener()}}, respectively,

and the <code>change</code> event masquerades as a {{MediaQueryList}}.

The following are the <a>event handlers</a>

(and their corresponding <a>event handler event types</a>) that must be supported,

as <a>event handler IDL attributes</a>, by all objects implementing the {{MediaQueryList}} interface:

<thead>

<tr>

<th><a>Event handler</a>

<th><a>Event handler event type</a>

<tbody>

<tr>

<td><dfn attribute for=MediaQueryList>onchange</dfn>

<td><a event>change</a>

MediaQueryList-addListener-handleEvent.html

MediaQueryList-addListener-removeListener.html

MediaQueryList-change-event-matches-value.html

MediaQueryList-extends-EventTarget-interop.html

MediaQueryList-extends-EventTarget.html

MediaQueryListEvent.html

interface MediaQueryListEvent : Event {

constructor(CSSOMString type, optional MediaQueryListEventInit eventInitDict = {});

readonly attribute CSSOMString media;

readonly attribute boolean matches;

};

dictionary MediaQueryListEventInit : EventInit {

CSSOMString media = "";

boolean matches = false;

};

The <dfn attribute for=MediaQueryListEvent>media</dfn> attribute must return the value it was initialized to.

The <dfn attribute for=MediaQueryListEvent>matches</dfn> attribute must return the value it was initialized to.

<i>This section is non-normative.</i>

<thead>

<tr>

<th>Event