CSSOM View Module

CSSOM View Module
CSSOM View Module
W3C Working Draft
16 September 2025
More details about this document
This version:
Latest published version:
Editor's Draft:
Previous Versions:
History:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Simon Fraser
Apple Inc
Emilio Cobos Álvarez
Mozilla
Former Editors:
Simon Pieters
Opera Software AS
Glenn Adams
Cox Communications, Inc.
glenn.adams@cos.com
Anne van Kesteren
Opera Software ASA
annevk@annevk.nl
Suggest an Edit for this Spec:
GitHub Editor
Legacy issues list:
Bugzilla
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
The APIs introduced by this specification provide authors with a way to inspect and manipulate the visual view of a document. This includes getting the position of element layout boxes, obtaining the width of the viewport through script, and also scrolling an element.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index.
This document was published
by the
CSS Working Group
as a
Working Draft
using the
Recommendation
track
Publication as a Working Draft
does not imply endorsement by
W3C
and its Members.
This is a draft document
and may be updated, replaced
or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than a work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “cssom-view” in the title, like this:
“[cssom-view]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent that the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
1.
Background
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.
Tests
Basic IDL tests
idlharness.html
(live test)
(source)
2.
Terminology
Terminology used in this specification is from
DOM,
CSSOM and
HTML.
[DOM]
[CSSOM]
[HTML]
An element
body
(which will be
the
body
element
) is
potentially scrollable
if all of the following conditions are true:
body
has an associated
box
body
’s
parent element
’s computed value of the
overflow-x
or
overflow-y
properties is neither
visible
nor
clip
body
’s computed value of the
overflow-x
or
overflow-y
properties is neither
visible
nor
clip
Note:
body
element that is
potentially scrollable
might not have a
scrolling box
For instance, it could have a used value of
overflow
being
auto
but not have its content overflowing its content area.
scrolling box
of a
viewport
or element has two
overflow directions
, which are the
block-end
and
inline-end
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 Box Alignment 3
§ 5.3 Alignment Overflow and Scroll Containers
The term
scrolling area
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
If the
overflow directions
are…
For a
viewport
For an element
rightward and downward
top edge
The top edge of the
initial containing block
right edge
The right-most edge of the right edge of the
initial containing block
and the right
margin edge
of all of the
viewport’s
descendants' boxes.
bottom edge
The bottom-most edge of the bottom edge of the
initial containing block
and the
bottom
margin edge
of all of the
viewport’s
descendants' boxes.
left edge
The left edge of the
initial containing block
top edge
The element’s top
padding edge
right edge
The right-most edge of the element’s right
padding edge
and the right
margin
edge
of all of the element’s descendants' boxes,
excluding boxes that have an ancestor of the element as their containing block.
bottom edge
The bottom-most edge of the element’s bottom
padding edge
and the bottom
margin
edge
of all of the element’s descendants'
boxes, excluding boxes that have an ancestor of the element as their containing block.
left edge
The element’s left
padding edge
leftward and downward
top edge
The top edge of the
initial containing block
right edge
The right edge of the
initial containing block
bottom edge
The bottom-most edge of the bottom edge of the
initial containing block
and the
bottom
margin edge
of all of the
viewport’s
descendants' boxes.
left edge
The left-most edge of the left edge of the
initial containing block
and the left
margin edge
of all of the
viewport’s
descendants' boxes.
top edge
The element’s top
padding edge
right edge
The element’s right
padding edge
bottom edge
The bottom-most edge of the element’s bottom
padding edge
and the bottom
margin
edge
of all of the element’s descendants' boxes, excluding boxes that have an ancestor of
the element as their containing block.
left edge
The left-most edge of the element’s left
padding edge
and the left
margin
edge
of all of the element’s descendants' boxes, excluding boxes that have an ancestor of
the element as their containing block.
leftward and upward
top edge
The top-most edge of the top edge of the
initial containing block
and the top
margin edge
of all of the
viewport’s
descendants' boxes.
right edge
The right edge of the
initial containing block
bottom edge
The bottom edge of the
initial containing block
left edge
The left-most edge of the left edge of the
initial containing block
and the left
margin edge
of all of the
viewport’s
descendants' boxes.
top edge
The top-most edge of the element’s top
padding edge
and the top
margin edge
of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the
element as their containing block.
right edge
The element’s right
padding edge
bottom edge
The element’s bottom
padding edge
left edge
The left-most edge of the element’s left
padding edge
and the left
margin
edge
of all of the element’s descendants' boxes, excluding boxes that have an ancestor of
the element as their containing block.
rightward and upward
top edge
The top-most edge of the top edge of the
initial containing block
and the top
margin edge
of all of the
viewport’s
descendants' boxes.
right edge
The right-most edge of the right edge of the
initial containing block
and the right
margin edge
of all of the
viewport’s
descendants' boxes.
bottom edge
The bottom edge of the
initial containing block
left edge
The left edge of the
initial containing block
top edge
The top-most edge of the element’s top
padding edge
and the top
margin edge
of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the
element as their containing block.
right edge
The right-most edge of the element’s right
padding edge
and the right
margin
edge
of all of the element’s descendants' boxes, excluding boxes that have an ancestor of
the element as their containing block.
bottom edge
The element’s bottom
padding edge
left edge
The element’s left
padding edge
The
origin
of a
scrolling area
is
the origin of the
initial containing block
if the
scrolling area
is a
viewport
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
beginning edges
of a particular set of edges of a box or element are the following edges:
If the
overflow directions
are rightward and downward
The top and left edges.
If the
overflow directions
are leftward and downward
The top and right edges.
If the
overflow directions
are leftward and upward
The bottom and right edges.
If the
overflow directions
are rightward and upward
The bottom and left edges.
The
ending edges
of a particular set of edges of a box or element are the following edges:
If the
overflow directions
are rightward and downward
The bottom and right edges.
If the
overflow directions
are leftward and downward
The bottom and left edges.
If the
overflow directions
are leftward and upward
The top and left edges.
If the
overflow directions
are rightward and upward
The top and right edges.
The
visual viewport
is a kind of
viewport
whose
scrolling area
is another
viewport
called the
layout viewport
In addition to scrolling, the
visual viewport
may also apply a scale transform to its
layout viewport
This transform is applied to the
canvas
of the
layout viewport
and does not affect its internal coordinate space.
Note:
The scale transform of the visual viewport is often referred to as "pinch-zoom". Conceptually, this transform
changes the size of the CSS
reference pixel
but changes the size of the layout viewport proportionally so that it
does not cause reflow of the page’s contents.
The magnitude of the scale transform is known as the
visual viewport
’s
scale factor
This animation shows an example of a zoomed in visual viewport being "panned" around (for
example, by a user performing a touch drag). The page is scaled so that the layout viewport
is larger than the visual viewport.
A scroll delta is applied to the visual viewport first. When the visual viewport is at its
extent, scroll delta will be applied to the layout viewport. This behavior is implemented by
the
perform a scroll
steps.
The
VisualViewport
object has an
associated document
, 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
box
(the column or column group, respectively).
The term
SVG layout box
refers to a
box
generated by an SVG element
which does not correspond to a CSS-defined
display
type.
(Such as the
box
generated by a
rect
element.)
The term
transforms
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
is
2.1.
CSS pixels
All coordinates and dimensions for the APIs defined in this
specification are in
CSS pixels
, unless otherwise specified.
[CSS-VALUES]
Note:
This does not apply to e.g.
matchMedia()
as the units are explicitly given there.
2.2.
Zooming
There are two kinds of zoom,
page zoom
which affects the size of the initial viewport, and the visual viewport
scale factor
which acts like
a magnifying glass and does not affect the initial viewport or actual viewport.
[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.
2.3.
Web-exposed screen information
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
Web-exposed screen area
is one of the following:
The area of the output device, in
CSS pixels
The area of the
viewport
, in
CSS pixels
The
Web-exposed available screen area
is one of the following:
The available area of the rendering surface of the output device, in
CSS pixels
The area of the output device, in
CSS pixels
The area of the
viewport
, in
CSS pixels
3.
Common Infrastructure
This specification depends on the WHATWG Infra standard.
[INFRA]
3.1.
Scrolling
When a user agent is to
perform a scroll
of a
scrolling box
box
to a given position
position
an associated element or
pseudo-element
element
and optionally a scroll behavior
behavior
(which is "
auto
" if omitted),
the following steps must be run:
Abort
any ongoing
smooth scroll
for
box
If the user agent honors the
scroll-behavior
property and one of the following are true:
behavior
is "
auto
" and
element
is not null and its computed value of the
scroll-behavior
property is
smooth
behavior
is
smooth
...then perform a
smooth scroll
of
box
to
position
. Once the position has finished updating, emit the
scrollend
event.
Otherwise, perform an
instant scroll
of
box
to
position
. After an
instant scroll
emit the
scrollend
event.
Note:
behavior: "instant"
always performs an
instant scroll
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
scrollend
event fires because no scrolling occurred.
When a user agent is to
perform a scroll
of a
viewport
to a given position
position
and optionally a scroll behavior
behavior
(which is "
auto
" if omitted) it must perform a coordinated viewport scroll by following these steps:
Let
doc
be the
viewport’s
associated
Document
Let
vv
be the
VisualViewport
whose
associated document
is
doc
Let
maxX
be the difference between
viewport
’s
scrolling box
’s width and the value of
vv
’s
width
attribute.
Let
maxY
be the difference between
viewport
’s
scrolling box
’s height and the value of
vv
’s
height
attribute.
Let
dx
be the horizontal component of
position
- the value
vv
’s
pageLeft
attribute
Let
dy
be the vertical component of
position
- the value of
vv
’s
pageTop
attribute
Let
visual x
be the value of
vv
’s
offsetLeft
attribute.
Let
visual y
be the value of
vv
’s
offsetTop
attribute.
Let
visual dx
be min(
maxX
, max(0,
visual x
dx
)) -
visual x
Let
visual dy
be min(
maxY
, max(0,
visual y
dy
)) -
visual y
Let
layout dx
be
dx
visual dx
Let
layout dy
be
dy
visual dy
Let
element
be
doc
’s root element if there is one, null otherwise.
Perform a scroll
of the
viewport
’s
scrolling box
to its current scroll position + (
layout dx
layout dy
) with
element
as the
associated element, and
behavior
as the scroll behavior.
Perform a scroll
of
vv
’s
scrolling box
to its current scroll position + (
visual dx
visual dy
) with
element
as the associated
element, and
behavior
as the scroll behavior.
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
example
above
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
completed
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
smooth scroll
of a
scrolling box
box
to
position
it must update the scroll position of
box
in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is
completed
, the scroll position of
box
must be
position
. The scroll can also
be
aborted
, either by an algorithm or by the user.
When a user agent is to perform an
instant scroll
of a
scrolling box
box
to
position
, it must update the scroll position of
box
to
position
To
scroll to the beginning of the document
for a document
document
, follow these steps:
Let
viewport
be the
viewport
that is associated with
document
Let
position
be the scroll position
viewport
would have by aligning the
beginning edges
of the
scrolling area
with the
beginning edges
of
viewport
If
position
is the same as
viewport
’s current scroll position, and
viewport
does not have an ongoing
smooth scroll
, abort these steps.
Perform a scroll
of
viewport
to
position
and
document
’s
root element
as the associated element, if there is one, or null otherwise.
Note:
This algorithm is used when navigating to the
#top
fragment identifier, as defined in HTML.
[HTML]
Tests
interrupt-hidden-smooth-scroll.html
(live test)
(source)
long_scroll_composited.html
(live test)
(source)
scroll-back-to-initial-position.html
(live test)
(source)
scrolling-no-browsing-context.html
(live test)
(source)
scrolling-quirks-vs-nonquirks.html
(live test)
(source)
smooth-scroll-in-load-event.html
(live test)
(source)
smooth-scroll-nonstop.html
(live test)
(source)
3.2.
WebIDL values
When asked to
normalize non-finite values
for a value
if
is one of the three special floating point literal values
Infinity
-Infinity
or
NaN
),
then
must be changed to the value
[WEBIDL]
4.
Extensions to the
Window
Interface
enum
ScrollBehavior
"auto"
"instant"
"smooth"
};
dictionary
ScrollOptions
ScrollBehavior
behavior
= "auto";
};
dictionary
ScrollToOptions
ScrollOptions
unrestricted
double
left
unrestricted
double
top
};
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
long
);
undefined
moveBy
long
long
);
undefined
resizeTo
long
width
long
height
);
undefined
resizeBy
long
long
);

// 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
undefined
scroll
optional
ScrollToOptions
options
= {});
undefined
scroll
unrestricted
double
unrestricted
double
);
undefined
scrollTo
optional
ScrollToOptions
options
= {});
undefined
scrollTo
unrestricted
double
unrestricted
double
);
undefined
scrollBy
optional
ScrollToOptions
options
= {});
undefined
scrollBy
unrestricted
double
unrestricted
double
);

// 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
matchMedia(
query
method is invoked these steps must be run:
Let
parsed media query list
be the result of
parsing
query
Return a new
MediaQueryList
object,
with
this
’s
associated
Document
as the
document
with
parsed media query list
as its associated
media query list
Tests
matchMedia-display-none-iframe.html
(live test)
(source)
matchMedia.html
(live test)
(source)
The
screen
attribute must return the
Screen
object
associated with the
Window
object.
Note:
Accessing
screen
through a
WindowProxy
object might yield different
results when the
Document
is navigated.
If the
associated document
is
fully active
, the
visualViewport
attribute must return the
VisualViewport
object associated with the
Window
object’s
associated
document
. 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.
Tests
window-screen-height-immutable.html
(live test)
(source)
window-screen-height.html
(live test)
(source)
window-screen-width-immutable.html
(live test)
(source)
window-screen-width.html
(live test)
(source)
The
moveTo(
method must follow these steps:
Optionally, return.
Let
target
be
this
’s
relevant global object
’s
browsing context
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.
Optionally, clamp
and
in a user-agent-defined manner so that the window does not move outside the available space.
Move
target
’s window such that the window’s top left corner is at coordinates (
) relative to the top left corner of the output device, measured in
CSS pixels
of
target
. The positive axes are rightward and downward.
The
moveBy(
method must follow these steps:
Optionally, return.
Let
target
be
this
’s
relevant global object
’s
browsing context
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.
Optionally, clamp
and
in a user-agent-defined manner so that the window does not move outside the available space.
Move
target
’s window
CSS pixels
of
target
rightward and
CSS pixels
of
target
downward.
The
resizeTo(
width
height
method must follow these steps:
Optionally, return.
Let
target
be
this
’s
relevant global object
’s
browsing context
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.
Optionally, clamp
width
and
height
in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
Resize
target
’s window by moving its right and bottom edges such that the distance between the left and right edges of the viewport are
width
CSS pixels
of
target
and the distance between the top and bottom edges of the viewport are
height
CSS pixels
of
target
Optionally, move
target
’s window in a user-agent-defined manner so that it does not grow outside the available space.
Tests
resizeTo-negative.html
(live test)
(source)
The
resizeBy(
method must follow these steps:
Optionally, return.
Let
target
be
this
’s
relevant global object
’s
browsing context
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.
Optionally, clamp
and
in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
Resize
target
’s window by moving its right edge
CSS pixels
of
target
rightward and its bottom edge
CSS pixels
of
target
downward.
Optionally, move
target
’s window in a user-agent-defined manner so that it does not grow outside the available space.
The
innerWidth
attribute must return the
viewport
width including the size of a rendered
scroll bar (if any), or zero if there is no
viewport
The following snippet shows how to obtain the width of the viewport:
var viewportWidth = innerWidth
The
innerHeight
attribute must return the
viewport
height including the size of a rendered
scroll bar (if any), or zero if there is no
viewport
The
scrollX
attribute must return the x-coordinate,
relative to the
initial containing block
origin,
of the left of the
viewport
or zero if there is no
viewport
The
pageXOffset
attribute must return the value returned by the
scrollX
attribute.
The
scrollY
attribute must return the y-coordinate,
relative to the
initial containing block
origin,
of the top of the
viewport
or zero if there is no
viewport
The
pageYOffset
attribute must return the value returned by the
scrollY
attribute.
When the
scroll()
method is invoked these
steps must be run:
If invoked with one argument, follow these substeps:
Let
options
be the argument.
Let
be the value of the
left
dictionary member of
options
, if present,
or the
viewport’s
current scroll position on the x axis otherwise.
Let
be the value of the
top
dictionary member of
options
, if present,
or the
viewport’s
current scroll position on the y axis otherwise.
If invoked with two arguments, follow these substeps:
Let
options
be null
converted
to a
ScrollToOptions
dictionary.
[WEBIDL]
Let
and
be the arguments, respectively.
Normalize non-finite values
for
and
If there is no
viewport
, abort these steps.
Let
viewport width
be the width of the
viewport
excluding the width of the scroll bar, if any.
Let
viewport height
be the height of the
viewport
excluding the height of the scroll bar, if any.
If the
viewport
has rightward
overflow direction
Let
be max(0, min(
viewport
scrolling area
width -
viewport width
)).
If the
viewport
has leftward
overflow direction
Let
be min(0, max(
viewport width
viewport
scrolling area
width)).
If the
viewport
has downward
overflow direction
Let
be max(0, min(
viewport
scrolling area
height -
viewport height
)).
If the
viewport
has upward
overflow direction
Let
be min(0, max(
viewport height
viewport
scrolling area
height)).
Let
position
be the scroll position the
viewport
would have
by aligning the x-coordinate
of the
viewport
scrolling area
with the left of the
viewport
and aligning the y-coordinate
of the
viewport
scrolling area
with the top of the
viewport
If
position
is the same as the
viewport’s
current scroll position,
and the
viewport
does not have an ongoing
smooth scroll
, abort these steps.
Let
document
be the
viewport’s
associated
Document
Perform a scroll
of the
viewport
to
position
document
’s
root element
as the associated element, if there is one, or null otherwise,
and the scroll behavior being the value of the
behavior
dictionary member of
options
User agents do not agree whether this uses the (coordinated)
viewport
perform a scroll
or the
scrolling box
perform a scroll
on the layout viewport’s scrolling box.
Tests
add-background-attachment-fixed-during-smooth-scroll.html
(live test)
(source)
HTMLBody-ScrollArea_quirksmode.html
(live test)
(source)
window-scroll-arguments.html
(live test)
(source)
When the
scrollTo()
method is invoked, the
user agent must act as if the
scroll()
method was invoked with the same arguments.
Tests
background-change-during-smooth-scroll.html
(live test)
(source)
scrollTo-zoom.html
(live test)
(source)
When the
scrollBy()
method is invoked, the
user agent must run these steps:
If invoked with two arguments, follow these substeps:
Let
options
be null
converted
to a
ScrollToOptions
dictionary.
[WEBIDL]
Let
and
be the arguments, respectively.
Let the
left
dictionary member of
options
have the value
Let the
top
dictionary member of
options
have the value
Normalize non-finite values
for the
left
and
top
dictionary members of
options
Add the value of
scrollX
to the
left
dictionary member.
Add the value of
scrollY
to the
top
dictionary member.
Act as if the
scroll()
method was invoked with
options
as the only argument.
The
screenX
and
screenLeft
attributes must return the x-coordinate,
relative to the origin of the
Web-exposed screen area
, of the left of
the client window as number of
CSS pixels
, or zero if there is no such
thing.
Tests
screenLeftTop.html
(live test)
(source)
The
screenY
and
screenTop
attributes must return the y-coordinate,
relative to the origin of the screen of the
Web-exposed screen area
, of the top of
the client window as number of
CSS pixels
, or zero if there is no such
thing.
The
outerWidth
attribute must return the width of the
client window. If there is no client window this
attribute must return zero.
The
outerHeight
attribute must return the height of the
client window. If there is no client window this
attribute must return zero.
The
devicePixelRatio
attribute must return the result of the following
determine the device pixel ratio
algorithm:
If there is no output device, return 1 and abort these steps.
Let
CSS pixel size
be the size of a
CSS pixel
at the current
page zoom
and using a
scale factor
of 1.0.
Let
device pixel size
be the vertical size of a device pixel of the output device.
Return the result of dividing
CSS pixel size
by
device pixel size
4.1.
The
features
argument to the
open()
method
HTML defines the
open()
method. This section defines behavior for position and size given
in the
features
argument.
[HTML]
To
set up browsing context features
for a browsing context
target
given a
map
tokenizedFeatures
Let
be null.
Let
be null.
Let
width
be null.
Let
height
be null.
If
tokenizedFeatures
["
left
"]
exists
Set
to the result of invoking the
rules for parsing integers
on
tokenizedFeatures
["
left
"].
If
is an error, set
to 0.
Optionally, clamp
in a user-agent-defined manner so that the window does not
move outside the
Web-exposed available screen area
Optionally, move
target
’s window such that the window’s left edge is at the
horizontal coordinate
relative to the left edge of the
Web-exposed screen
area
, measured in
CSS pixels
of
target
. The positive axis is rightward.
If
tokenizedFeatures
["
top
"]
exists
Set
to the result of invoking the
rules for parsing integers
on
tokenizedFeatures
["
top
"].
If
is an error, set
to 0.
Optionally, clamp
in a user-agent-defined manner so that the window does not
move outside the
Web-exposed available screen area
Optionally, move
target
’s window such that the window’s top edge is at the
vertical coordinate
relative to the top edge of the
Web-exposed screen
area
, measured in
CSS pixels
of
target
. The positive axis is downward.
If
tokenizedFeatures
["
width
"]
exists
Set
width
to the result of invoking the
rules for parsing integers
on
tokenizedFeatures
["
width
"].
If
width
is an error, set
width
to 0.
If
width
is not 0:
Optionally, clamp
width
in a user-agent-defined manner so that the window does
not get too small or bigger than the
Web-exposed available screen area
Optionally, size
target
’s window by moving its right edge such that the
distance between the left and right edges of the viewport are
width
CSS pixels
of
target
Optionally, move
target
’s window in a user-agent-defined manner so that it
does not grow outside the
Web-exposed available screen area
If
tokenizedFeatures
["
height
"]
exists
Set
height
to the result of invoking the
rules for parsing integers
on
tokenizedFeatures
["
height
"].
If
height
is an error, set
height
to 0.
If
height
is not 0:
Optionally, clamp
height
in a user-agent-defined manner so that the window
does not get too small or bigger than the
Web-exposed available screen area
Optionally, size
target
’s window by moving its bottom edge such that the
distance between the top and bottom edges of the viewport are
height
CSS pixels
of
target
Optionally, move
target
’s window in a user-agent-defined manner so that it
does not grow outside the
Web-exposed available screen area
supported
open()
feature name
is one of the following:
width
The width of the viewport.
height
The height of the viewport.
left
The left position of the window.
top
The top position of the window.
4.2.
The
MediaQueryList
Interface
This section integrates with the
event loop
defined in HTML.
[HTML]
MediaQueryList
object has an associated
media query list
and an associated
document
set on creation.
MediaQueryList
object has an associated
media
which is the
serialized
form of the associated
media query list
MediaQueryList
object has an associated
matches state
which is
true if the associated
media query list
matches the state of the
document
, and false otherwise.
When asked to
evaluate media queries and report changes
for a
Document
doc
, run these steps:
For each
MediaQueryList
object
target
that has
doc
as its
document
in the order they were created, oldest first, run these substeps:
If
target
’s
matches state
has changed since the last time these steps were run,
fire an event
named
change
at
target
using
MediaQueryListEvent
with its
isTrusted
attribute initialized to true,
its
media
attribute initialized to
target
’s
media
and its
matches
attribute initialized to
target
’s
matches state
A simple piece of code that detects changes in the orientation of the viewport can be written as follows:
function
handleOrientationChange
event
if
event
matches
// landscape
else
var
mql
matchMedia
"(orientation:landscape)"
);
mql
onchange
handleOrientationChange
Exposed
Window
interface
MediaQueryList
EventTarget
readonly
attribute
CSSOMString
media
readonly
attribute
boolean
matches
undefined
addListener
EventListener
callback
);
undefined
removeListener
EventListener
callback
);
attribute
EventHandler
onchange
};
The
media
attribute must return
the associated
media
The
matches
attribute must return
the associated
matches state
The
addListener(
callback
method,
when invoked, must run these steps:
Add an event listener
with
this
and an
event listener
whose
type
is
change
and
callback
is
callback
The
removeListener(
callback
method,
when invoked, must run these steps:
If
this
’s
event listener list
contains
an
event listener
whose
type
is
change
callback
is
callback
and
capture
is false,
then
remove an event listener
with
this
and that
event listener
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
change
event masquerades as a
MediaQueryList
The following are the
event handlers
(and their corresponding
event handler event types
) that must be supported,
as
event handler IDL attributes
, by all objects implementing the
MediaQueryList
interface:
Event handler
Event handler event type
onchange
change
Tests
MediaQueryList-addListener-handleEvent.html
(live test)
(source)
MediaQueryList-addListener-removeListener.html
(live test)
(source)
MediaQueryList-change-event-matches-value.html
(live test)
(source)
MediaQueryList-extends-EventTarget-interop.html
(live test)
(source)
MediaQueryList-extends-EventTarget.html
(live test)
(source)
MediaQueryListEvent.html
(live test)
(source)
Exposed
Window
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
media
attribute must return the value it was initialized to.
The
matches
attribute must return the value it was initialized to.
4.2.1.
Event summary
This section is non-normative.
Event
Interface
Interesting targets
Description
change
MediaQueryListEvent
MediaQueryList
Fired at the
MediaQueryList
when the
matches state
changes.
4.3.
The
Screen
Interface
As its name suggests, the
Screen
interface represents information about the screen of the output device.
Exposed
Window
interface
Screen
readonly
attribute
long
availWidth
readonly
attribute
long
availHeight
readonly
attribute
long
width
readonly
attribute
long
height
readonly
attribute
unsigned
long
colorDepth
readonly
attribute
unsigned
long
pixelDepth
};
The
availWidth
attribute must return the width of the
Web-exposed
available screen area
The
availHeight
attribute must return the height of the
Web-exposed available screen area
The
width
attribute must return the width of the
Web-exposed
screen area
The
height
attribute must return the height of the
Web-exposed
screen area
The
colorDepth
and
pixelDepth
attributes should return the number of bits
allocated to colors for a pixel in the output device, excluding the alpha
channel. If the user agent is not able to return the number of bits used by the
output device, it should return the closest estimation such as, for example, the
number of bits used by the frame buffer sent to the display or any internal
representation that would be the closest to the value the output device would
use. The user agent must return a value for these attributes at least equal to
the value of the
color
media feature multiplied by three. If the different
color components are not represented with the same number of bits, the returned
value may be greater than three times the value of the
color
media feature. If the user
agent does not know the color depth or does not want to return it for privacy
considerations, it should return 24.
Note:
The
colorDepth
and
pixelDepth
attributes return the same value for
compatibility reasons.
Note:
Some non-conforming implementations are known to return 32 instead of 24.
Tests
cssom-view-window-screen-interface.html
(live test)
(source)
screen-detached-frame.html
(live test)
(source)
Screen-pixelDepth-Screen-colorDepth001.html
(live test)
(source)
5.
Extensions to the
Document
Interface
partial
interface
Document
Element
elementFromPoint
double
double
);
sequence
Element
elementsFromPoint
double
double
);
CaretPosition
caretPositionFromPoint
double
double
optional
CaretPositionFromPointOptions
options
= {});
readonly
attribute
Element
scrollingElement
};
dictionary
CaretPositionFromPointOptions
sequence
ShadowRoot
shadowRoots
= [];
};
The
elementFromPoint(
method must follow these steps:
If either argument is negative,
is greater than the
viewport
width excluding the size of a rendered scroll bar (if any), or
is greater than the
viewport
height excluding the size of a rendered scroll bar (if any), or there is no
viewport
associated with the document, return null and terminate these steps.
If there is a
box
in the
viewport
that would be a target for hit testing at coordinates
when applying the
transforms
that apply to the descendants of the
viewport
, return the associated element and terminate these steps.
If the document has a
root element
, return the
root element
and terminate these steps.
Return null.
Note:
The
elementFromPoint()
method does not necessarily return the top-most painted element. For
instance, an element can be excluded from being a target for hit testing by using the
pointer-events
CSS property.
Tests
elementFromPoint-001.html
(live test)
(source)
elementFromPoint-002.html
(live test)
(source)
elementFromPoint-003.html
(live test)
(source)
elementFromPoint-dynamic-anon-box.html
(live test)
(source)
elementFromPoint-ellipsis-in-inline-box.html
(live test)
(source)
elementFromPoint-float-in-relative.html
(live test)
(source)
elementFromPoint-float-in-table.html
(live test)
(source)
elementFromPoint-list-001.html
(live test)
(source)
elementFromPoint-mixed-font-sizes.html
(live test)
(source)
elementFromPoint-parameters.html
(live test)
(source)
elementFromPoint-subpixel.html
(live test)
(source)
elementFromPoint-visibility-hidden-resizer.html
(live test)
(source)
elementFromPoint.html
(live test)
(source)
elementFromPosition.html
(live test)
(source)
negativeMargins.html
(live test)
(source)
The
elementsFromPoint(
method must follow these steps:
Let
sequence
be a new empty sequence.
If either argument is negative,
is greater than the
viewport
width excluding the size of a rendered scroll bar (if any), or
is greater than the
viewport
height excluding the size of a rendered scroll bar (if any), or there is no
viewport
associated with the document, return
sequence
and terminate these steps.
For each
box
in the
viewport
, in paint order, starting with the topmost box, that would be a target for hit testing at
coordinates
even if nothing would be overlapping it, when applying the
transforms
that apply to the descendants of the
viewport
, append the associated element to
sequence
If the document has a
root element
, and the last item in
sequence
is not the
root element
, append the
root element
to
sequence
Return
sequence
Tests
elementsFromPoint-iframes.html
(live test)
(source)
elementsFromPoint-inline-htb-ltr.html
(live test)
(source)
elementsFromPoint-inline-htb-rtl.html
(live test)
(source)
elementsFromPoint-inline-vlr-ltr.html
(live test)
(source)
elementsFromPoint-inline-vlr-rtl.html
(live test)
(source)
elementsFromPoint-inline-vrl-ltr.html
(live test)
(source)
elementsFromPoint-inline-vrl-rtl.html
(live test)
(source)
elementsFromPoint-invalid-cases.html
(live test)
(source)
elementsFromPoint-shadowroot.html
(live test)
(source)
elementsFromPoint-simple.html
(live test)
(source)
elementsFromPoint-svg-text.html
(live test)
(source)
elementsFromPoint-svg.html
(live test)
(source)
elementsFromPoint-table.html
(live test)
(source)
elementsFromPoint.html
(live test)
(source)
The
caretPositionFromPoint(
options
method must return the
result of running these steps:
If there is no
viewport
associated with the document, return null.
If either argument is negative,
is greater
than the
viewport
width excluding the size of a rendered
scroll bar (if any),
is greater than the
viewport
height excluding the size of a rendered scroll bar
(if any) return null.
If at the coordinates
in the
viewport
no text insertion point indicator would have
been inserted when applying the
transforms
that apply to the descendants of the
viewport
, return null.
If at the coordinates
in the
viewport
a text insertion point indicator would have
been inserted in a text entry widget which is also a replaced element, when applying the
transforms
that apply to the descendants of the
viewport
, return a
caret position
with its properties set as follows:
caret node
The node corresponding to the text entry widget.
caret offset
The amount of 16-bit units to the left of where the
text insertion point indicator would have inserted.
Otherwise:
Let
caretPosition
be a
tuple
consisting of a
caretPositionNode
(a
node
) and a
caretPositionOffset
(a non-negative integer) for the position where the text insertion point indicator would have been inserted when applying
the
transforms
that apply to the descendants of the
viewport
Let
startNode
be the
caretPositionNode
of the
caretPosition
, and let
startOffset
be the
caretPositionOffset
of the
caretPosition
While
startNode
is a
node
startNode
’s
root
is a
shadow root
, and
startNode
’s
root
is not a
shadow-including inclusive ancestor
of any of
options
["
shadowRoots
"], repeat these steps:
Set
startOffset
to
index
of
startNode
’s
root
’s
host
Set
startNode
to
startNode
’s
root
’s
host
’s
parent
Return a
caret position
with its properties set as follows:
caret node
is set to
startNode
caret offset
is set to
startOffset
Note:
This
caret position
is not
live
Note:
The specifics of hit testing are out of scope of this
specification and therefore the exact details of
elementFromPoint()
and
caretPositionFromPoint()
are therefore too. Hit testing will hopefully be defined in a future
revision of CSS or HTML.
The
scrollingElement
attribute, on getting, must run these steps:
If the
Document
is in
quirks mode
, follow these substeps:
If
the
body
element
exists, and it is not
potentially scrollable
, return
the
body
element
and abort these steps.
For this purpose,
a value of
overflow:clip
on the
the
body
element
’s parent element
must be treated as
overflow:hidden
Return null and abort these steps.
If there is a
root element
, return the
root element
and abort these steps.
Return null.
Note:
For non-conforming user agents that always use the
quirks mode
behavior for
scrollTop
and
scrollLeft
, the
scrollingElement
attribute is expected to also always return
the
body
element
(or null if it does not exist).
This API exists so that Web developers can use it to get the right element to use for scrolling APIs,
without making assumptions about a particular user agent’s behavior
or having to invoke a scroll to see which element scrolls the viewport.
Note:
the
body
element
is different from HTML’s
document.body
in that the latter can return a
frameset
element.
Tests
scroll-overflow-clip-quirks-001.html
(live test)
(source)
scroll-overflow-clip-quirks-002.html
(live test)
(source)
scrollingElement-quirks-dynamic-001.html
(live test)
(source)
scrollingElement-quirks-dynamic-002.html
(live test)
(source)
scrollingElement.html
(live test)
(source)
5.1.
The
CaretPosition
Interface
caret position
gives the position of a text insertion point indicator. It always has an associated
caret node
and
caret offset
. It is represented by a
CaretPosition
object.
Exposed
Window
interface
CaretPosition
readonly
attribute
Node
offsetNode
readonly
attribute
unsigned
long
offset
NewObject
DOMRect
getClientRect
();
};
The
offsetNode
attribute must return the
caret node
The
offset
attribute must return the
caret offset
The
getClientRect()
method must follow these steps,
aborting on the first step that returns a value:
If
caret node
is a text entry widget that is a replaced element,
and that is in the document,
return a
scaled
DOMRect
object for the caret in the widget
as represented by the
caret offset
value.
The
transforms
that apply to the element and its ancestors are applied.
Otherwise:
Let
caretRange
be a collapsed
Range
object whose
start node
and
end node
are set to
caret node
, and whose
start offset
and
end offset
are set to
caret offset
Return the
DOMRect
object which is the result of invoking the
getBoundingClientRect()
method on
caretRange
Note:
This
DOMRect
object is not
live
Tests
CaretPosition-001.html
(live test)
(source)
6.
Extensions to the
Element
Interface
enum
ScrollLogicalPosition
"start"
"center"
"end"
"nearest"
};
dictionary
ScrollIntoViewOptions
ScrollOptions
ScrollLogicalPosition
block
= "start";
ScrollLogicalPosition
inline
= "nearest";
ScrollIntoViewContainer
container
= "all";
};
enum
ScrollIntoViewContainer
"all"
"nearest"
};
dictionary
CheckVisibilityOptions
boolean
checkOpacity
false
boolean
checkVisibilityCSS
false
boolean
contentVisibilityAuto
false
boolean
opacityProperty
false
boolean
visibilityProperty
false
};
partial
interface
Element
DOMRectList
getClientRects
();
NewObject
DOMRect
getBoundingClientRect
();
boolean
checkVisibility
optional
CheckVisibilityOptions
options
= {});
undefined
scrollIntoView
optional
boolean
or
ScrollIntoViewOptions
arg
= {});
undefined
scroll
optional
ScrollToOptions
options
= {});
undefined
scroll
unrestricted
double
unrestricted
double
);
undefined
scrollTo
optional
ScrollToOptions
options
= {});
undefined
scrollTo
unrestricted
double
unrestricted
double
);
undefined
scrollBy
optional
ScrollToOptions
options
= {});
undefined
scrollBy
unrestricted
double
unrestricted
double
);
attribute
unrestricted
double
scrollTop
attribute
unrestricted
double
scrollLeft
readonly
attribute
long
scrollWidth
readonly
attribute
long
scrollHeight
readonly
attribute
long
clientTop
readonly
attribute
long
clientLeft
readonly
attribute
long
clientWidth
readonly
attribute
long
clientHeight
readonly
attribute
double
currentCSSZoom
};
Note:
The
checkOpacity
and
checkVisibilityCSS
properties are historical names.
These properties have aliases that match the new naming scheme,
namely
opacityProperty
and
visibilityProperty
The
getClientRects()
method, when invoked, must return the result of the following algorithm:
If the element on which it was invoked does not have an associated
box
return an empty
DOMRectList
object and stop this algorithm.
If the element has an associated
SVG layout box
return a
scaled
DOMRectList
object containing a single
DOMRect
object that describes the bounding box of the element as defined by the SVG specification, applying the
transforms
that apply to the element and its ancestors.
Return a
DOMRectList
object containing
DOMRect
objects in content order, one for each
box fragment
, describing its border area (including those with a height or width of zero) with the following constraints:
Apply the
transforms
that apply to the element and its ancestors.
If the element on which the method was invoked has a computed value for the
display
property of
table
or
inline-table
include both the table box and the caption box, if any, but not the anonymous container box.
Replace each
anonymous
block box
with its child box(es) and repeat this until no anonymous block boxes are left in the final list.
Note:
The
DOMRect
objects returned by
getClientRects()
are not
live
Tests
cssom-getClientRects-002.html
(live test)
(source)
cssom-getClientRects.html
(live test)
(source)
DOMRectList.html
(live test)
(source)
getClientRects-br-htb-ltr.html
(live test)
(source)
getClientRects-br-htb-rtl.html
(live test)
(source)
getClientRects-br-vlr-ltr.html
(live test)
(source)
getClientRects-br-vlr-rtl.html
(live test)
(source)
getClientRects-br-vrl-ltr.html
(live test)
(source)
getClientRects-br-vrl-rtl.html
(live test)
(source)
getClientRects-inline-atomic-child.html
(live test)
(source)
getClientRects-inline-inline-child.html
(live test)
(source)
getClientRects-inline.html
(live test)
(source)
getClientRects-zoom.html
(live test)
(source)
historical.html
(live test)
(source)
ttwf-js-cssomview-getclientrects-length.html
(live test)
(source)
The
getBoundingClientRect()
method, when
invoked on an element
element
, must return the result of
getting the bounding box
for
element
To
get the bounding box
for
element
run the following steps:
Let
list
be the result of invoking
getClientRects()
on
element
If the
list
is empty return a
DOMRect
object whose
width
and
height
members are zero.
If all rectangles in
list
have zero width or height, return the first rectangle in
list
Otherwise, return a
DOMRect
object describing the smallest rectangle that includes all
of the rectangles in
list
of which the height or width is not zero.
Note:
The
DOMRect
object returned by
getBoundingClientRect()
is not
live
The following snippet gets the dimensions of the first
div
element in a document:
var
example
document
getElementsByTagName
"div"
)[
].
getBoundingClientRect
();
var
exampleWidth
example
width
var
exampleHeight
example
height
Tests
cssom-getBoundingClientRect-001.html
(live test)
(source)
cssom-getBoundingClientRect-002.html
(live test)
(source)
cssom-getBoundingClientRect-003.html
(live test)
(source)
cssom-getBoundingClientRect-vertical-rl.html
(live test)
(source)
getBoundingClientRect-empty-inline.html
(live test)
(source)
getBoundingClientRect-newline.html
(live test)
(source)
getBoundingClientRect-scroll.html
(live test)
(source)
getBoundingClientRect-shy.html
(live test)
(source)
getBoundingClientRect-svg.html
(live test)
(source)
getBoundingClientRect-zoom.html
(live test)
(source)
GetBoundingRect.html
(live test)
(source)
Note: The
checkVisibility()
method
provides a set of simple checks
for whether an element is potentially "visible".
It defaults to a very simple and straightforward method
based on the
box tree
but allows for several additional checks to be opted into,
depending on what precise notion of "visibility" is desired.
The
checkVisibility(
options
method
must run these steps,
when called on an element
this
If
this
does not have an associated
box
return false.
If an ancestor of
this
in the
flat tree
has
content-visibility: hidden
return false.
If either the
opacityProperty
or the
checkOpacity
dictionary members of
options
are true,
and
this
, or an ancestor of
this
in the
flat tree
has a computed
opacity
value of
return false.
If either the
visibilityProperty
or the
checkVisibilityCSS
dictionary members of
options
are true,
and
this
is
invisible
return false.
If the
contentVisibilityAuto
dictionary member of
options
is true
and an ancestor of
this
in the
flat tree
skips its contents
due to
content-visibility: auto
return false.
Return true.
Tests
checkVisibility.html
(live test)
(source)
The
scrollIntoView(
arg
method must run these steps:
Let
behavior
be "
auto
".
Let
block
be "
start
".
Let
inline
be "
nearest
".
Let
container
be
null
If
arg
is a
ScrollIntoViewOptions
dictionary, then:
Set
behavior
to the
behavior
dictionary member of
options
Set
block
to the
block
dictionary member of
options
Set
inline
to the
inline
dictionary member of
options
If the
container
dictionary member of
options
is "
nearest
",
set
container
to the element.
Otherwise, if
arg
is false, then set
block
to "
end
".
If the element does not have any associated
box
or is not available to user-agent features,
then return.
Scroll the element into view
with
behavior
block
inline
, and
container
Optionally perform some other action that brings the element to the user’s attention.
A component can use scrollIntoView to scroll content of interest into the specified alignment:
style
scroller
overflow
auto
scroll-padding
px
slide
scroll-margin
16
px
scroll-snap-align
center
style
div
class
"carousel"
div
class
"slides scroller"
div
id
"s1"
class
"slide"
div
id
"s2"
class
"slide"
div
id
"s3"
class
"slide"
div
div
class
"markers"
button
data-target
"s1"
button
button
data-target
"s2"
button
button
data-target
"s3"
button
div
div
script
document
querySelector
'.markers'
).
addEventListener
'click'
evt
=>
const
target
document
getElementById
evt
target
dataset
target
);
if
target
return
// scrollIntoView correctly aligns target item respecting scroll-snap-align,
// scroll-margin, and the scroll container’s scroll-padding.
target
scrollIntoView
({
// Only scroll the nearest scroll container.
container
'nearest'
behavior
'smooth'
});
});
script
Tests
scrollIntoView-align-scrollport-covering-child.html
(live test)
(source)
scrollIntoView-container.html
(live test)
(source)
scrollintoview-containingblock-chain.html
(live test)
(source)
scrollIntoView-fixed-outside-of-viewport.html
(live test)
(source)
scrollIntoView-fixed.html
(live test)
(source)
scrollIntoView-horizontal-partially-visible.html
(live test)
(source)
scrollIntoView-horizontal-tb-writing-mode-and-rtl-direction.html
(live test)
(source)
scrollIntoView-horizontal-tb-writing-mode.html
(live test)
(source)
scrollIntoView-inline-image.html
(live test)
(source)
scrollIntoView-multiple-nested.html
(live test)
(source)
scrollIntoView-multiple.html
(live test)
(source)
scrollIntoView-scrolling-container.html
(live test)
(source)
scrollIntoView-scrollMargin.html
(live test)
(source)
scrollIntoView-scrollPadding.html
(live test)
(source)
scrollIntoView-shadow.html
(live test)
(source)
scrollIntoView-should-treat-slot-as-scroll-container.html
(live test)
(source)
scrollIntoView-sideways-lr-writing-mode-and-rtl-direction.html
(live test)
(source)
scrollIntoView-sideways-lr-writing-mode.html
(live test)
(source)
scrollIntoView-sideways-rl-writing-mode-and-rtl-direction.html
(live test)
(source)
scrollIntoView-sideways-rl-writing-mode.html
(live test)
(source)
scrollIntoView-smooth.html
(live test)
(source)
scrollIntoView-stuck.tentative.html
(live test)
(source)
scrollIntoView-svg-shape.html
(live test)
(source)
scrollIntoView-vertical-lr-writing-mode-and-rtl-direction.html
(live test)
(source)
scrollIntoView-vertical-lr-writing-mode.html
(live test)
(source)
scrollIntoView-vertical-rl-writing-mode.html
(live test)
(source)
scrollintoview-zero-height-item.html
(live test)
(source)
scrollintoview.html
(live test)
(source)
smooth-scrollIntoView-with-smooth-fragment-scroll.html
(live test)
(source)
smooth-scrollIntoView-with-unrelated-gesture-scroll.html
(live test)
(source)
visual-scrollIntoView-001.html
(live test)
(source)
visual-scrollIntoView-002.html
(live test)
(source)
visual-scrollIntoView-003.html
(live test)
(source)
The
scroll()
method must run these steps:
If invoked with one argument, follow these substeps:
Let
options
be the argument.
Normalize non-finite values
for
left
and
top
dictionary members of
options
, if present.
Let
be the value of the
left
dictionary member of
options
, if present, or the element’s current scroll position on the x axis otherwise.
Let
be the value of the
top
dictionary member of
options
, if present, or the element’s current scroll position on the y axis otherwise.
If invoked with two arguments, follow these substeps:
Let
options
be null
converted
to a
ScrollToOptions
dictionary.
[WEBIDL]
Let
and
be the arguments, respectively.
Normalize non-finite values
for
and
Let the
left
dictionary member of
options
have the value
Let the
top
dictionary member of
options
have the value
Let
document
be the element’s
node document
If
document
is not the
active document
, terminate these steps.
Let
window
be the value of
document
’s
defaultView
attribute.
If
window
is null, terminate these steps.
If the element is the
root element
and
document
is in
quirks mode
, terminate these steps.
If the element is the
root element
invoke
scroll()
on
window
with
scrollX
on
window
as first argument and
as second argument,
and terminate these steps.
If the element is
the
body
element
document
is in
quirks mode
and the element is not
potentially scrollable
invoke
scroll()
on
window
with
options
as the only argument,
and terminate these steps.
If the element does not have any associated
box
the element has no associated
scrolling box
or the element has no overflow,
terminate these steps.
Scroll the element
to
with the scroll behavior being the value of the
behavior
dictionary member of
options
When the
scrollTo()
method is invoked, the
user agent must act as if the
scroll()
method was invoked with the same arguments.
When the
scrollBy()
method is invoked, the
user agent must run these steps:
If invoked with one argument, follow these substeps:
Let
options
be the argument.
Normalize non-finite values
for
left
and
top
dictionary members of
options
, if present.
If invoked with two arguments, follow these substeps:
Let
options
be null
converted
to a
ScrollToOptions
dictionary.
[WEBIDL]
Let
and
be the arguments, respectively.
Normalize non-finite values
for
and
Let the
left
dictionary member of
options
have the value
Let the
top
dictionary member of
options
have the value
Add the value of
scrollLeft
to the
left
dictionary member.
Add the value of
scrollTop
to the
top
dictionary member.
Act as if the
scroll()
method was invoked with
options
as the only argument.
Tests
window-scrollBy-display-change.html
(live test)
(source)
The
scrollTop
attribute, on getting, must return the result of running these steps:
Let
document
be the element’s
node document
If
document
is not the
active document
, return zero and terminate these steps.
Let
window
be the value of
document
’s
defaultView
attribute.
If
window
is null, return zero and terminate these steps.
If the element is the
root element
and
document
is in
quirks mode
, return zero and terminate these steps.
If the element is the
root element
return the value of
scrollY
on
window
If the element is
the
body
element
document
is in
quirks mode
, and the element is not
potentially scrollable
, return the value of
scrollY
on
window
If the element does not have any associated
box
, return zero and terminate these steps.
Return the y-coordinate of the
scrolling area
at the alignment point with the top of the
padding edge
of the element.
When setting the
scrollTop
attribute these steps must be run:
Let
be the given value.
Normalize non-finite values
for
Let
document
be the element’s
node document
If
document
is not the
active document
, terminate these steps.
Let
window
be the value of
document
’s
defaultView
attribute.
If
window
is null, terminate these steps.
If the element is the
root element
and
document
is in
quirks mode
, terminate these steps.
If the element is the
root element
invoke
scroll()
on
window
with
scrollX
on
window
as first argument and
as second argument, and terminate these steps.
If the element is
the
body
element
document
is in
quirks mode
, and the element is not
potentially scrollable
, invoke
scroll()
on
window
with
scrollX
as first argument and
as second argument, and terminate these steps.
If the element does not have any associated
box
, the element has no associated
scrolling box
, or the element has no overflow, terminate these steps.
Scroll the element
to
scrollLeft
, with the scroll behavior being "
auto
".
Tests
dom-element-scroll.html
(live test)
(source)
elementScroll-002.html
(live test)
(source)
elementScroll.html
(live test)
(source)
scroll-no-layout-box.html
(live test)
(source)
scroll-offsets-fractional-zoom.html
(live test)
(source)
scroll-zoom.html
(live test)
(source)
scrollTop-display-change.html
(live test)
(source)
table-scroll-props.html
(live test)
(source)
The
scrollLeft
attribute, on getting, must return the result of running these steps:
Let
document
be the element’s
node document
If
document
is not the
active document
, return zero and terminate these steps.
Let
window
be the value of
document
’s
defaultView
attribute.
If
window
is null, return zero and terminate these steps.
If the element is the
root element
and
document
is in
quirks mode
, return zero and terminate these steps.
If the element is the
root element
return the value of
scrollX
on
window
If the element is
the
body
element
document
is in
quirks mode
, and the element is not
potentially scrollable
, return the value of
scrollX
on
window
If the element does not have any associated
box
, return zero and terminate these steps.
Return the x-coordinate of the
scrolling area
at the alignment point with the left of the
padding edge
of the element.
When setting the
scrollLeft
attribute these steps must be run:
Let
be the given value.
Normalize non-finite values
for
Let
document
be the element’s
node document
If
document
is not the
active document
, terminate these steps.
Let
window
be the value of
document
’s
defaultView
attribute.
If
window
is null, terminate these steps.
If the element is the
root element
and
document
is in
quirks mode
, terminate these steps.
If the element is the
root element
invoke
scroll()
on
window
with
as first argument and
scrollY
on
window
as second argument, and terminate these steps.
If the element is
the
body
element
document
is in
quirks mode
, and the element is not
potentially scrollable
, invoke
scroll()
on
window
with
as first argument and
scrollY
on
window
as second argument, and terminate these steps.
If the element does not have any associated
box
, the element has no associated
scrolling box
, or the element has no overflow, terminate these steps.
Scroll the element
to
scrollTop
, with the scroll behavior being "
auto
".
Tests
scrollLeft-of-scroller-with-wider-scrollbar.html
(live test)
(source)
scrollLeftTop.html
(live test)
(source)
The
scrollWidth
attribute must return the result of running these steps:
Let
document
be the element’s
node document
If
document
is not the
active document
, return zero and terminate these steps.
Let
viewport width
be the width of the
viewport
excluding the width of the scroll bar, if any, or zero if there is no
viewport
If the element is the
root element
and
document
is not in
quirks mode
return max(
viewport
scrolling area
width,
viewport width
).
If the element is
the
body
element
document
is in
quirks mode
and the element is not
potentially scrollable
, return max(
viewport
scrolling area
width,
viewport width
).
If the element does not have any associated
box
return zero and terminate these steps.
Return the width of the element’s
scrolling area
Tests
pt-to-px-width.html
(live test)
(source)
scrollWidthHeight-contain-layout.html
(live test)
(source)
scrollWidthHeight-negative-margin-001.html
(live test)
(source)
scrollWidthHeight-negative-margin-002.html
(live test)
(source)
scrollWidthHeight-overflow-visible-margin-collapsing.html
(live test)
(source)
scrollWidthHeight-overflow-visible-negative-margins.html
(live test)
(source)
scrollWidthHeight.xht
(live test)
(source)
scrollWidthHeightWhenNotScrollable.xht
(live test)
(source)
The
scrollHeight
attribute must return the result of running these steps:
Let
document
be the element’s
node document
If
document
is not the
active document
, return zero and terminate these steps.
Let
viewport height
be the height of the
viewport
excluding the height of the scroll bar, if any, or zero if there is no
viewport
If the element is the
root element
and
document
is not in
quirks mode
return max(
viewport
scrolling area
height,
viewport height
).
If the element is
the
body
element
document
is in
quirks mode
and the element is not
potentially scrollable
, return max(
viewport
scrolling area
height,
viewport height
).
If the element does not have any associated
box
return zero and terminate these steps.
Return the height of the element’s
scrolling area
The
clientTop
attribute must run these steps:
If the element has no associated
box
or if the
box
is inline, return zero.
Return the
unscaled
computed value of the
border-top-width
property plus the height of any scrollbar rendered between the top
padding edge
and the top
border edge
, ignoring any
transforms
that apply to the element and its ancestors.
Tests
client-props-inline-list-item.html
(live test)
(source)
client-props-input.html
(live test)
(source)
client-props-root.html
(live test)
(source)
client-props-zoom.html
(live test)
(source)
outer-svg.html
(live test)
(source)
table-client-props.html
(live test)
(source)
The
clientLeft
attribute must run these steps:
If the element has no associated
box
or if the
box
is inline, return zero.
Return the
unscaled
computed value of the
border-left-width
property plus the width of any scrollbar rendered between the left
padding edge
and the left
border edge
, ignoring any
transforms
that apply to the element and its ancestors.
The
clientWidth
attribute must run these steps:
If the element has no associated
box
or if the
box
is inline, return zero.
If the element is the
root element
and the element’s
node document
is not in
quirks mode
, or if the element is
the
body
element
and the element’s
node document
is
in
quirks mode
, return the
viewport
width excluding the size of a rendered scroll bar (if any).
Return the
unscaled
width of the
padding edge
excluding the width of any rendered scrollbar between the
padding edge
and the
border edge
, ignoring any
transforms
or that apply to the element and its ancestors.
The
clientHeight
attribute must run these steps:
If the element has no associated
box
or if the
box
is inline, return zero.
If the element is the
root element
and the element’s
node document
is not in
quirks mode
, or if the element is
the
body
element
and the element’s
node document
is
in
quirks mode
, return the
viewport
height excluding the size of a rendered scroll bar (if any).
Return the
unscaled
height of the
padding edge
excluding the height of any rendered scrollbar between the
padding edge
and the
border edge
, ignoring any
transforms
that apply to the element and its ancestors.
The
currentCSSZoom
attribute must return the
effective zoom
of the element, or 1.0 if the element isn’t
being rendered
Tests
Element-currentCSSZoom.html
(live test)
(source)
table-border-collapse-client-width-height.html
(live test)
(source)
table-border-separate-client-width-height.html
(live test)
(source)
table-with-border-client-width-height.html
(live test)
(source)
6.1.
Element
Scrolling Members
To
determine the scroll-into-view position
of a
target
, which is an
Element
pseudo-element
, or
Range
with a scroll behavior
behavior
a block flow direction position
block
an inline base direction position
inline
and a
scrolling box
scrolling box
run the following steps:
Let
target bounding border box
be the box represented by the return value of invoking Element’s
getBoundingClientRect()
, if
target
is an
Element
, or Range’s
getBoundingClientRect()
, if
target
is a
Range
Let
scrolling box edge A
be the
beginning edge
in the
block flow direction
of
scrolling box
, and let
element edge A
be
target bounding border box
’s edge on the same physical side as that of
scrolling box edge A
Let
scrolling box edge B
be the
ending edge
in the
block flow direction
of
scrolling box
, and let
element edge B
be
target bounding border box
’s edge on the same physical side as that of
scrolling box edge B
Let
scrolling box edge C
be the
beginning edge
in the
inline base direction
of
scrolling box
, and let
element edge C
be
target bounding border box
’s edge on the same physical side as that of
scrolling box edge C
Let
scrolling box edge D
be the
ending edge
in the
inline base direction
of
scrolling box
, and let
element edge D
be
target bounding border box
’s edge on the same physical side as that of
scrolling box edge D
Let
element height
be the distance between
element edge A
and
element edge B
Let
scrolling box height
be the distance between
scrolling box edge A
and
scrolling box edge B
Let
element width
be the distance between
element edge C
and
element edge D
Let
scrolling box width
be the distance between
scrolling box edge C
and
scrolling box edge D
Let
position
be the scroll position
scrolling box
would have by following these steps:
If
block
is "
start
", then align
element edge A
with
scrolling box edge A
Otherwise, if
block
is "
end
", then align
element edge B
with
scrolling box edge B
Otherwise, if
block
is "
center
", then align the center of
target bounding border box
with the center of
scrolling box
in
scrolling box
’s
block flow direction
Otherwise,
block
is "
nearest
":
If
element edge A
and
element edge B
are both outside
scrolling box edge A
and
scrolling box edge B
Do nothing.
If
element edge A
is outside
scrolling box edge A
and
element height
is less than
scrolling box height
If
element edge B
is outside
scrolling box edge B
and
element height
is greater than
scrolling box height
Align
element edge A
with
scrolling box edge A
If
element edge A
is outside
scrolling box edge A
and
element height
is greater than
scrolling box height
If
element edge B
is outside
scrolling box edge B
and
element height
is less than
scrolling box height
Align
element edge B
with
scrolling box edge B
If
inline
is "
start
", then align
element edge C
with
scrolling box edge C
Otherwise, if
inline
is "
end
", then align
element edge D
with
scrolling box edge D
Otherwise, if
inline
is "
center
", then align the center of
target bounding border box
with the center of
scrolling box
in
scrolling box
’s
inline base direction
Otherwise,
inline
is "
nearest
":
If
element edge C
and
element edge D
are both outside
scrolling box edge C
and
scrolling box edge D
Do nothing.
If
element edge C
is outside
scrolling box edge C
and
element width
is less than
scrolling box width
If
element edge D
is outside
scrolling box edge D
and
element width
is greater than
scrolling box width
Align
element edge C
with
scrolling box edge C
If
element edge C
is outside
scrolling box edge C
and
element width
is greater than
scrolling box width
If
element edge D
is outside
scrolling box edge D
and
element width
is less than
scrolling box width
Align
element edge D
with
scrolling box edge D
If
target
is an
Element
, and the target element defines some
scroll snap positions
then the user agent must
scroll snap
the resulting
position
to one of that element’s
scroll snap positions
if its nearest
scroll container
is a
scroll snap container
The user agent
may
also do this even when the
scroll container
has
scroll-snap-type: none
Return
position
To
scroll a target into view
target
, which is an
Element
pseudo-element
, or
Range
with a scroll behavior
behavior
a block flow direction position
block
an inline base direction position
inline
and an optional containing
Element
to stop scrolling after reaching
container
means to run these steps:
For each ancestor element or
viewport
that establishes a
scrolling box
scrolling box
in order of innermost to outermost
scrolling box
, run these substeps:
If the
Document
associated with
target
is not
same origin
with the
Document
associated with the element or
viewport
associated with
scrolling box
, terminate these steps.
Let
position
be the scroll position resulting from running the steps to
determine the scroll-into-view position
of
target
with
behavior
as the
scroll behavior
block
as the
block flow position
inline
as the
inline base direction position
and
scrolling box
as the
scrolling box
If
position
is not the same as
scrolling box
’s current scroll position, or
scrolling box
has an ongoing
smooth scroll
If
scrolling box
is associated with an element
Perform a scroll
of the element’s
scrolling box
to
position
, with the element as the associated element and
behavior
as the scroll behavior.
If
scrolling box
is associated with a
viewport
Let
document
be the
viewport’s
associated
Document
Let
root element
be
document
’s
root element
, if there is one, or null otherwise.
Perform a scroll
of the
viewport
to
position
, with
root element
as the associated element and
behavior
as the scroll behavior.
If
container
is not null and either
scrolling box
is a
shadow-including inclusive ancestor
of
container
or
is a
viewport
whose
document
is a
shadow-including inclusive ancestor
of
container
abort the rest of these steps.
To
scroll an element
(or
pseudo-element
element
to
optionally with a scroll behavior
behavior
(which is "
auto
" if omitted) means to:
Let
box
be
element
’s associated
scrolling box
If
box
has rightward
overflow direction
Let
be max(0, min(
element
scrolling area
width -
element
padding edge
width)).
If
box
has leftward
overflow direction
Let
be min(0, max(
element
padding edge
width -
element
scrolling area
width)).
If
box
has downward
overflow direction
Let
be max(0, min(
element
scrolling area
height -
element
padding edge
height)).
If
box
has upward
overflow direction
Let
be min(0, max(
element
padding edge
height -
element
scrolling area
height)).
Let
position
be the scroll position
box
would have by aligning
scrolling area
x-coordinate
with the left of
box
and aligning
scrolling area
y-coordinate
with the top of
box
If
position
is the same as
box
’s current scroll position, and
box
does not have an ongoing
smooth scroll
, abort these steps.
Perform a scroll
of
box
to
position
element
as the associated element and
behavior
as the scroll behavior.
7.
Extensions to the
HTMLElement
Interface
partial
interface
HTMLElement
readonly
attribute
Element
scrollParent
readonly
attribute
Element
offsetParent
readonly
attribute
long
offsetTop
readonly
attribute
long
offsetLeft
readonly
attribute
long
offsetWidth
readonly
attribute
long
offsetHeight
};
The
scrollParent
attribute must return the result of running these steps:
If any of the following holds true, return null and terminate this algorithm:
The element does not have an associated
box
The element is the
root element
The element is
the
body
element
The element’s computed value of the
position
property is
fixed
and no ancestor establishes a fixed position
containing block
Let
ancestor
be the
containing block
of the element in the
flat tree
and repeat these substeps:
If
ancestor
is the
initial containing block
, return the
scrollingElement
for the element’s document if it is not
closed-shadow-hidden
from the element, otherwise return null.
If
ancestor
is not
closed-shadow-hidden
from the element, and is a
scroll container
, terminate this algorithm and return
ancestor
If the computed value of the
position
property of
ancestor
is
fixed
, and no ancestor establishes a fixed position
containing block
, terminate this algorithm and return null.
Let
ancestor
be the
containing block
of
ancestor
in the
flat tree
Tests
scrollParent-shadow-tree.html
(live test)
(source)
scrollParent.html
(live test)
(source)
The
offsetParent
attribute must return the result of running these steps:
If any of the following holds true return null and terminate this algorithm:
The element does not have an associated
box
The element is the
root element
The element is
the
body
element
The element’s computed value of the
position
property is
fixed
and no ancestor establishes a fixed position
containing block
Let
ancestor
be the parent of the element in the
flat tree
and repeat these substeps:
If
ancestor
is
closed-shadow-hidden
from the element, its computed value of the
position
property is
fixed
, and no ancestor establishes a fixed position
containing block
, terminate this algorithm and return null.
If
ancestor
is not
closed-shadow-hidden
from the element and satisfies at least one of the following, terminate this algorithm and return
ancestor
The element is in a fixed position
containing block
, and
ancestor
is a containing block for fixed-positioned descendants.
The element is not in a fixed position
containing block
, and:
ancestor
is a containing block of absolutely-positioned descendants (regardless of whether there are any absolutely-positioned descendants).
It is
the
body
element
The computed value of the
position
property of the element is
static
and the ancestor is one of the following
HTML elements
td
th
, or
table
The element has a different
effective zoom
than
ancestor
If there is no more parent of
ancestor
in the
flat tree
, terminate this algorithm and return null.
Let
ancestor
be the parent of
ancestor
in the
flat tree
Tests
offsetParent_element_test.html
(live test)
(source)
offsetParent-block-in-inline.html
(live test)
(source)
offsetParent-fixed.html
(live test)
(source)
The
offsetTop
attribute must return the result of running these steps:
If the element is
the
body
element
or does not have any associated
box
return zero and terminate this algorithm.
If the
offsetParent
of the element is null return the
unscaled
y-coordinate of the top
border edge
of the first
box
associated with the element, relative to the
initial containing block
origin, ignoring any
transforms
that apply to the element and its ancestors and terminate this algorithm.
Return the
unscaled
result of subtracting the y-coordinate of the top
padding edge
of the first
box
associated with the
offsetParent
of the element
from the y-coordinate of the top
border edge
of the first
box
associated with the element,
relative to the
initial containing block
origin,
ignoring any
transforms
that apply to the element and its ancestors.
Note:
An inline element that consists of multiple line boxes will only have its first
box
considered.
Tests
offsetTop-offsetLeft-nested-offsetParents.html
(live test)
(source)
offsetTop-offsetLeft-with-zoom.html
(live test)
(source)
offsetTopLeft-border-box.html
(live test)
(source)
offsetTopLeft-empty-inline-offset.html
(live test)
(source)
offsetTopLeft-empty-inline.html
(live test)
(source)
offsetTopLeft-inline.html
(live test)
(source)
offsetTopLeft-leading-space-inline.html
(live test)
(source)
offsetTopLeft-table-caption.html
(live test)
(source)
offsetTopLeft-trailing-space-inline.html
(live test)
(source)
offsetTopLeftInScrollableParent.html
(live test)
(source)
table-offset-props.html
(live test)
(source)
The
offsetLeft
attribute must return the result of running these steps:
If the element is
the
body
element
or does not have any associated
box
return zero and terminate this algorithm.
If the
offsetParent
of the element is null return the
unscaled
x-coordinate of the left
border edge
of the first
box
associated with the element, relative to the
initial containing block
origin, ignoring any
transforms
that apply to the element and its ancestors, and terminate this algorithm.
Return the
unscaled
result of subtracting the x-coordinate of the left
padding edge
of the first
box
associated with the
offsetParent
of the element from the x-coordinate of the left
border edge
of the first
box
associated with the element, relative to the
initial containing block
origin, ignoring any
transforms
that apply to the element and its ancestors.
The
offsetWidth
attribute must return the result of running these steps:
If the element does not have any associated
box
return zero and terminate this algorithm.
Return the
unscaled
width of the axis-aligned bounding box
of the
border boxes
of all fragments generated by the element’s
principal box
ignoring any
transforms
that apply to the element and its ancestors.
If the element’s
principal box
is an
inline-level box
which was "split" by a
block-level
descendant,
also include fragments generated by the
block-level
descendants,
unless they are zero width or height.
Tests
htmlelement-offset-width-001.html
(live test)
(source)
The
offsetHeight
attribute must return the result of running these steps:
If the element does not have any associated
box
return zero and terminate this algorithm.
Return the
unscaled
height of the axis-aligned bounding box
of the
border boxes
of all fragments generated by the element’s
principal box
ignoring any
transforms
that apply to the element and its ancestors.
If the element’s
principal box
is an
inline-level box
which was "split" by a
block-level
descendant,
also include fragments generated by the
block-level
descendants,
unless they are zero width or height.
8.
Extensions to the
HTMLImageElement
Interface
partial
interface
HTMLImageElement
readonly
attribute
long
readonly
attribute
long
};
The
attribute, on getting, must return the
scaled
x-coordinate of the left
border edge
of the
first
box
associated with the element, relative to the
initial containing block
origin, ignoring any
transforms
that apply to the element and its ancestors, or zero if there is no
box
The
attribute, on getting, must return the
scaled
y-coordinate of the top
border edge
of the
first
box
associated with the element, relative to the
initial containing block
origin, ignoring any
transforms
that apply to the element and its ancestors, or zero if there is no
box
Tests
cssom-view-img-attributes-001.html
(live test)
(source)
image-x-y-zoom.html
(live test)
(source)
HTMLImageElement-x-and-y-ignore-transforms.html
(live test)
(source)
9.
Extensions to the
Range
Interface
partial
interface
Range
DOMRectList
getClientRects
();
NewObject
DOMRect
getBoundingClientRect
();
};
The
getClientRects()
method, when invoked, must return an empty
DOMRectList
object if the range is not in the document and otherwise a
DOMRectList
object
containing a list of
DOMRect
objects in content order that matches the following constraints:
For each element selected by the range, whose parent is not selected by the range, include the border areas returned by invoking
getClientRects()
on the element.
For each
Text
node selected or partially selected by the range (including when the
boundary-points are identical), include
scaled
DOMRect
object (for the part that is selected, not
the whole line box). The bounds of these
DOMRect
objects are computed using font metrics;
thus, for horizontal writing, the vertical dimension of each box is determined by the font
ascent and descent, and the horizontal dimension by the text advance width. If the range covers
a partial
typographic character unit
(e.g. half a surrogate pair or part of
a grapheme cluster), the full
typographic character unit
must be included
for the purpose of computing the bounds of the relevant
DOMRect
[CSS-TEXT-3]
The
transforms
that apply to the ancestors are applied.
Note:
The
DOMRect
objects returned by
getClientRects()
are not
live
Tests
range-bounding-client-rect-with-nested-text.html
(live test)
(source)
range-client-rects-surrogate-indexing.html
(live test)
(source)
The
getBoundingClientRect()
method, when invoked, must return the result of the following
algorithm:
Let
list
be the result of invoking
getClientRects()
on the same range this method was invoked on.
If
list
is empty return a
DOMRect
object whose
width
and
height
members are zero.
If all rectangles in
list
have zero width or height, return the first rectangle in
list
Otherwise, return a
DOMRect
object describing the smallest rectangle that includes all
of the rectangles in
list
of which the height or width is not zero.
Note:
The
DOMRect
object returned by
getBoundingClientRect()
is not
live
Tests
range-bounding-client-rect-with-display-contents.html
(live test)
(source)
10.
Extensions to the
MouseEvent
Interface
The object IDL fragment redefines some members. Can we resolve this somehow?
partial
interface
MouseEvent
readonly
attribute
double
screenX
readonly
attribute
double
screenY
readonly
attribute
double
pageX
readonly
attribute
double
pageY
readonly
attribute
double
clientX
readonly
attribute
double
clientY
readonly
attribute
double
readonly
attribute
double
readonly
attribute
double
offsetX
readonly
attribute
double
offsetY
};
partial
dictionary
MouseEventInit
double
screenX
= 0.0;
double
screenY
= 0.0;
double
clientX
= 0.0;
double
clientY
= 0.0;
};
Tests
mouseEvent.html
(live test)
(source)
The
screenX
attribute must return the x-coordinate of
the position where the event occurred relative to the origin of the
Web-exposed screen area
The
screenY
attribute must return the y-coordinate of
the position where the event occurred relative to the origin of the
Web-exposed screen area
The
pageX
attribute must follow these steps:
If the event’s
dispatch flag
is set, return the horizontal coordinate of the position where the event occurred relative to the origin of the
initial containing block
and terminate these steps.
Let
offset
be the value of the
scrollX
attribute of the event’s associated
Window
object, if there is one, or zero otherwise.
Return the sum of
offset
and the value of the event’s
clientX
attribute.
The
pageY
attribute must follow these steps:
If the event’s
dispatch flag
is set, return the vertical coordinate of the position where the event occurred relative to the origin of the
initial containing block
and terminate these steps.
Let
offset
be the value of the
scrollY
attribute of the event’s associated
Window
object, if there is one, or zero otherwise.
Return the sum of
offset
and the value of the event’s
clientY
attribute.
The
clientX
attribute must return the x-coordinate of
the position where the event occurred relative to the origin of the
viewport
The
clientY
attribute must return the y-coordinate of
the position where the event occurred relative to the origin of the
viewport
The
attribute must return the value of
clientX
The
attribute must return the value of
clientY
The
offsetX
attribute must follow these steps:
If the event’s
dispatch flag
is set, return the x-coordinate of the position where the event occurred relative to the origin of the
padding edge
of the target node, ignoring the
transforms
that apply to the element and its ancestors, and terminate these steps.
Return the value of the event’s
pageX
attribute.
Tests
mouseEvent-offsetXY-svg.html
(live test)
(source)
The
offsetY
attribute must follow these steps:
If the event’s
dispatch flag
is set, return the y-coordinate of the position where the event occurred relative to the origin of the
padding edge
of the target node, ignoring the
transforms
that apply to the element and its ancestors, and terminate these steps.
Return the value of the event’s
pageY
attribute.
11.
Geometry
11.1.
The
GeometryUtils
Interface
enum
CSSBoxType
"margin"
"border"
"padding"
"content"
};
dictionary
BoxQuadOptions
CSSBoxType
box
= "border";
GeometryNode
relativeTo
; // XXX default document (i.e. viewport)
};
dictionary
ConvertCoordinateOptions
CSSBoxType
fromBox
= "border";
CSSBoxType
toBox
= "border";
};
interface
mixin
GeometryUtils
sequence
DOMQuad
getBoxQuads
optional
BoxQuadOptions
options
= {});
DOMQuad
convertQuadFromNode
DOMQuadInit
quad
GeometryNode
from
optional
ConvertCoordinateOptions
options
= {});
DOMQuad
convertRectFromNode
DOMRectReadOnly
rect
GeometryNode
from
optional
ConvertCoordinateOptions
options
= {});
DOMPoint
convertPointFromNode
DOMPointInit
point
GeometryNode
from
optional
ConvertCoordinateOptions
options
= {}); // XXX z,w turns into 0
};
Text
includes
GeometryUtils
; // like Range
Element
includes
GeometryUtils
CSSPseudoElement
includes
GeometryUtils
Document
includes
GeometryUtils
typedef
Text
or
Element
or
CSSPseudoElement
or
Document
GeometryNode
The
getBoxQuads(
options
method must run the following steps:
DOM order
p1 = top left even in RTL
scale to 0 means divide by zero, return 0x0
cross-frames not allowed, throw WrongDocumentError?
points are flattened (3d transform), z=0. like getClientRect
test block in inline
pseudo-elements before/after are children of the element
viewport boxes are all the same
Tests
cssom-getBoxQuads-001.html
(live test)
(source)
cssom-getBoxQuads-002.html
(live test)
(source)
The
convertQuadFromNode(
quad
from
options
method
must run the following steps:
...
The
convertRectFromNode(
rect
from
options
method
must run the following steps:
...
The
convertPointFromNode(
point
from
options
method must run the following steps:
...
12.
VisualViewport
12.1.
The
VisualViewport
Interface
Exposed
Window
interface
VisualViewport
EventTarget
readonly
attribute
double
offsetLeft
readonly
attribute
double
offsetTop
readonly
attribute
double
pageLeft
readonly
attribute
double
pageTop
readonly
attribute
double
width
readonly
attribute
double
height
readonly
attribute
double
scale
attribute
EventHandler
onresize
attribute
EventHandler
onscroll
attribute
EventHandler
onscrollend
};
The
offsetLeft
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0.
Otherwise, return the offset of the left edge of the
visual viewport
from the left edge
of the
layout viewport
The
offsetTop
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0.
Otherwise, return the offset of the top edge of the
visual viewport
from the top edge
of the
layout viewport
The
pageLeft
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0.
Otherwise, return the offset of the left edge of the
visual viewport
from the left edge
of the
initial containing block
of the
layout viewport
’s
document
The
pageTop
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0.
Otherwise, return the offset of the top edge of the
visual viewport
from the top edge
of the
initial containing block
of the
layout viewport
’s
document
The
width
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0.
Otherwise, return the width of the
visual viewport
excluding the width of any rendered vertical
classic
scrollbar
that is fixed to the visual viewport.
Note:
Since this value is returned in CSS pixels, the value will decrease in magnitude if either
page zoom
or the
scale factor
is increased.
Note:
A scrollbar that is fixed to the visual viewport is one that does not change size or location as the visual
viewport is zoomed and panned. Because this value is in CSS pixels, when excluding the scrollbar width the UA must
account for how large the scrollbar is as measured in CSS pixels. That is, the amount excluded decreases when zooming in
and increases when zooming out.
The
height
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0.
Otherwise, return the height of the
visual viewport
excluding the height of any rendered horizontal
classic
scrollbar
that is fixed to the visual viewport.
The
scale
attribute must run these steps:
If the
visual viewport
’s
associated document
is not
fully active
, return 0
and abort these steps.
If there is no output device, return 1 and abort these steps.
Otherwise, return the
visual viewport
’s
scale factor
onresize
is the
event handler IDL attribute
for the
resize
event.
onscroll
is the
event handler IDL attribute
for the
scroll
event.
onscrollend
is the
event handler IDL attribute
for the
scrollend
event.
13.
Events
13.1.
Resizing viewports
This section integrates with the
event loop
defined in HTML.
[HTML]
When asked to
run the resize steps
for a
Document
doc
, run these steps:
If
doc
’s
viewport
has had its width or height changed
(e.g. as a result of the user resizing the browser window,
or changing
page zoom
or an
iframe
element’s dimensions are changed)
since the last time these steps were run,
fire an event
named
resize
at the
Window
object associated with
doc
If the
VisualViewport
associated with
doc
has had its
scale
width
, or
height
properties changed since
the last time these steps were run,
fire an event
named
resize
at the
VisualViewport
Tests
resize-event-on-initial-layout-001.html
(live test)
(source)
resize-event-on-initial-layout-002.html
(live test)
(source)
13.2.
Scrolling
This section integrates with the
event loop
defined in HTML.
[HTML]
Each
Document
has an associated list of
pending scroll event targets
, initially empty.
Each
Document
has an associated list of
pending scrollend event targets
, initially empty.
Whenever a
viewport
gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:
Let
doc
be the
viewport’s
associated
Document
If
doc
is a
snap container
run the steps to
update scrollsnapchanging targets
for
doc
with
doc
’s
eventual snap target
in the block axis
as newBlockTarget and
doc
’s
eventual snap target
in the inline axis
as newInlineTarget.
If
doc
is already in
doc
’s
pending scroll event targets
, abort these steps.
Append
doc
to
doc
’s
pending scroll event targets
Whenever an element gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:
Let
doc
be the element’s
node document
If the element is a
snap container
run the steps to
update scrollsnapchanging targets
for the element with the element’s
eventual snap target
in the block axis
as newBlockTarget and the element’s
eventual snap target
in the inline axis
as newInlineTarget.
If the element is already in
doc
’s
pending scroll event targets
, abort these steps.
Append the element to
doc
’s
pending scroll event targets
Whenever a
visual viewport
gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:
Let
vv
be the
VisualViewport
object that was scrolled.
Let
doc
be
vv
’s
associated document
If
vv
is already in
doc
’s
pending scroll event targets
, abort these steps.
Append
vv
to
doc
’s
pending scroll event targets
When asked to
run the scroll steps
for a
Document
doc
, run these steps:
Run the steps to
dispatch pending scrollsnapchanging events
for
doc
For each item
target
in
doc
’s
pending scroll event targets
in the order they were added to the list, run these substeps:
If
target
is a
Document
fire an event
named
scroll
that bubbles at
target
Otherwise,
fire an event
named
scroll
at
target
Empty
doc
’s
pending scroll event targets
Run the steps to
dispatch pending scrollsnapchange events
for
doc
Whenever scrolling is
completed
, the user agent must run these steps:
In what order are scrollend events dispatched? Ordered based on scroll start or scroll completion?
For each scrolling box
box
that was scrolled:
If
box
belongs to a
viewport
, let
doc
be the
viewport’s
associated
Document
and
target
be the
viewport
If
box
belongs to a
VisualViewport
, let
doc
be the
VisualViewport
’s
associated document
and
target
be the
VisualViewport
. Otherwise,
box
belongs to an element and let
doc
be the element’s
node document
and
target
be the element.
If
box
belongs to a
snap container
snapcontainer
run the
update scrollsnapchange targets
steps for
snapcontainer
If
target
is already in
doc
’s
pending scrollend event targets
, abort these steps.
Append
target
to
doc
’s
pending scrollend event targets
Run the steps to
dispatch pending scrollsnapchange targets
for
doc
For each item
target
in
doc
’s
pending scrollend event targets
, in the order they were added to the list, run these substeps:
If
target
is a
Document
fire an event
named
scrollend
that bubbles at
target
Otherwise,
fire an event
named
scrollend
at
target
Empty
doc
’s
pending scrollend event targets
13.3.
Event summary
This section is non-normative.
Event
Interface
Interesting targets
Description
resize
Event
Window
VisualViewport
Fired at the
Window
when the
viewport
is resized. Fired at
VisualViewport
when the
visual viewport
is resized
or the
layout viewport
is scaled.
scroll
Event
VisualViewport
Document
, elements
Fired at the
VisualViewport
Document
or element when the
VisualViewport
viewport
, or element is scrolled, respectively.
scrollend
Event
Document
, elements,
VisualViewport
Fired at the
VisualViewport
Document
, or element when a scroll is
completed
: the
VisualViewport
viewport
, or element has been scrolled, the scroll sequence has ended and any scroll offset changes have
been applied.
14.
Post-Layout State Snapshotting
Some CSS features use post-layout state, like scroll position, as input to the next style and layout update.
When asked to
run snapshot post-layout state steps
for a
Document
doc
, run these steps:
For each CSS feature that needs to snapshot post-layout state, take a snapshot of the relevant state in
doc
The state that is snapshot is defined in other specifications. These steps must not invalidate
doc
or any other
Document
s in such a way that other post-layout snapshotting steps can observe that such snapshotting happened. It follows that the order of which such snapshotting takes place must not matter.
15.
Privacy Considerations
The
Screen
interface exposes information about the user’s display configuration, which maybe be used as input to fingerprinting algorithms. User agents may choose to hide or quantize information about the screen size or configuration, in order to protect the user’s privacy.
MouseEvent
contains information about the screen-relative coordinates of the event. User agents may set these properties to values that obscure the actual screen-relative location of the event, in order to protect the user’s privacy.
16.
Security Considerations
No new security considerations have been reported on this specification.
17.
Changes
This section documents some of the changes between publications of this specification. This section is not exhaustive. Bug fixes and editorial changes are
generally not listed.
Changes since the
17 March 2016 Working Draft
Added Simon Fraser and Emilio Cobos Álvarez as current editors and moved Simon Pieters to former editors.
Clarified how
getClientRects()
handles
typographic character unit
s.
Changed how
getBoundingClientRect()
of
Element
and
getBoundingClientRect()
of
Range
handle empty rectangles.
Changed definition of
offsetParent
for Shadow DOM.
Allowed UAs to lie about
Screen
properties for privacy reasons.
Changed
colorDepth
and
pixelDepth
to return real values.
Changed 'CSS pixels' to refer to
[CSS-VALUES]
Changed default values for
ScrollIntoViewOptions
to
start
and
nearest
and slightly changed behavior of
scrollIntoView()
Added
screenLeft
and
screenTop
as aliases for
screenX
and
screenY
Defined overflow directions in terms of
block-end
and
inline-end
Renamed the arguments to
resizeTo()
to be
width
and
height
Added script-triggered scroll-snap to list of scrolls affected by
scroll-behavior
Fixed a logical error in the Terminology section.
Added the "Security Considerations" and "Privacy Considerations" sections
Moved the
scroll-behavior
property to
[CSS-OVERFLOW-3]
Adjusted the algorithm for
offsetWidth
and
offsetHeight
Added
checkVisibility()
method to
Element
Moved the
scrollend
event from
WICG overscroll-scrollend-events
to
[CSSOM-VIEW-1]
and added details for handling them.
Added a "get the bounding box" algorithm to
getBoundingClientRect()
Introduced the
VisualViewport
API and related concepts.
Extended scroll into view algorithm to also work on
Ranges
Clarified whether scaled or unscaled dimensions are returned by various APIs in relation to the
zoom
property.
Took scroll snapping and scroll target into account for various scrolling APIs.
Added
currentCSSZoom
attribute to
Element
Added options parameter to
caretPositionFromPoint()
method.
Removed caret range concept from CaretPosition interface.
Defined post-layout snapshotting.
Made the various scrolling algorithms accept a pseudo-element.
Added
container
option to
ScrollIntoViewOptions
Added the
scrollParent
attribute.
Pinch zoom got renamed to
scale factor
Changes since the
17 December 2013 Working Draft
The
scrollIntoView()
method on
Element
was changed and extended.
The
scrollTop
and
scrollLeft
IDL attributes on
Element
changed to no
longer take an object; the
scroll()
scrollTo()
and
scrollBy()
methods were added instead.
The
scrollWidth
scrollHeight
clientTop
clientLeft
clientWidth
and
clientHeight
IDL attributes on
Element
were changed back to return integers.
The
DOMRectList
interface was removed.
The
scrollingElement
IDL attribute on
Document
was added.
Some readonly attributes on
Window
were annotated with
[Replaceable]
IDL extended
attribute.
MediaQueryList
scroll
event and
resize
event are integrated with
the
event loop
in HTML so they are synchronized with animation frames.
The
instant
value of
scroll-behavior
was renamed to
auto
The origin of
scrollLeft
on
Element
was changed (for RTL).
The
scrollIntoView()
method on
Element
and
scroll()
scrollTo()
and
scrollBy()
methods on
Window
take the relevant
dictionary as the first argument.
The
MediaQueryList
interface was changed to use regular event API and define
addListener()
in terms of that.
Added "Change History" section.
Moved Glenn Adams to former editors.
Changes since the
04 August 2011 Working Draft
Added Simon Pieters and Glenn Adams as editors and moved Anne van Kesteren to former editors.
Introduced
scroll-behavior
CSS property.
Added
Block flow direction
and
inline base direction
from
[CSS-WRITING-MODES-3]
to terminology.
Added section about zooming.
Added
moveTo()
moveBy()
resizeTo()
, and
resizeBy()
methods to
Window
Added
devicePixelRatio
attribute to
Window
Introduced
ScrollOptions
dictionary and added an
options
parameter to scrolling methods.
Added
devicePixelRatio
attribute to
Window
Added
features
parameter to
open()
method.
Added
elementsFromPoint()
method to
Document
Added
getClientRect()
method to
CaretPosition
Introduced initial draft of
GeometryUtils
interface.
Changed
innerWidth
innerHeight
, etc. to use
double
CSS
transforms
are now acknowledged.
Replaced
ClientRect
by
DOMRect
Defined the firing behavior of
scroll
and
resize
events.
Changed
colorDepth
and
pixelDepth
to always return 24.
Changes since the
04 August 2009 Working Draft
Removed redundant definition of terminology of other specifications, explicitly defining units (e.g. CSS pixels) and content/document content distinction.
Introduced
MediaQueryList
interface.
Moved the
matchMedium()
method of the
Media
to the
Window
interface, renamed it to
matchMedia()
, and changed its return type to
MediaQueryList
Removed the
AbstractView
and
Media
interfaces.
Removed the
DocumentView
interface and moved methods
elementFromPoint()
and
caretRangeFromPoint()
to the
Document
interface.
Renamed the
caretRangeFromPoint()
method to
caretPositionFromPoint()
Introduced
CaretPosition
interface and changed the return type of
caretPositionFromPoint()
to
CaretPosition
Added the
scrollIntoView()
method to the
Element
interface.
Changes since the
22 February 2008 Working Draft
Removed the
WindowView
interface and moved its attributes and methods to an
AbstractView
and inheriting
ScreenView
interface.
Added the
document
IDL attribute to
AbstractView
Added the
scroll()
scrollTo()
, and
scrollBy()
methods to the
ScreenView
interface.
Removed the
ElementView
interface and moved its attributes and methods to the
Element
and
HTMLElement
interfaces.
Added the
defaultView
IDL attribute and
caretRangeFromPoint()
method to the
DocumentView
interface.
Removed
RangeView
interface and instead directly extended the
Range
interface.
Removed the
MouseEventView
interface and instead directly extended the
MouseEvent
interface.
Renamed the
TextRectangleList
interface to
ClientRectList
and turned the
item()
method into an indexed getter.
Renamed the
TextRectangle
interface to
ClientRect
and added the
width
and
height
attributes.
18.
Acknowledgements
The editors would like to thank
Alan Stearns,
Alexey Feldgendler,
Antonio Gomes,
Björn Höhrmann,
Boris Zbarsky,
Chris Rebert,
Corey Farwell,
Dan Bates,
David Vest,
Elliott Sprehn,
Garrett Smith,
Henrik Andersson,
Hallvord R. M. Steen,
Kang-Hao Lu,
Koji Ishii,
Leif Arne Storset,
Luiz Agostini,
Maciej Stachowiak,
Michael Dyck,
Mike Wilson,
Morten Stenshorne,
Olli Pettay,
Pavel Curtis,
Peter-Paul Koch,
Rachel Kmetz,
Rick Byers,
Robert O’Callahan,
Sam Weinig,
Scott Johnson,
Sebastian Zartner,
Stewart Brodie,
Sylvain Galineau,
Tab Atkins,
Tarquin Wilton-Jones,
Thomas Moore,
Thomas Shinnick,
and
Xiaomei Ji
for their contributions to this document.
Special thanks to the Microsoft employees who first implemented many of
the features specified in this draft, which were first widely deployed by
the Windows Internet Explorer browser.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
addListener(callback)
, in § 4.2
"all"
, in § 6
associated document
, in § 2
"auto"
, in § 4
availHeight
, in § 4.3
availWidth
, in § 4.3
beginning edges
, in § 2
behavior
, in § 4
block
, in § 6
"border"
, in § 11.1
box
, in § 11.1
BoxQuadOptions
, in § 11.1
caret node
, in § 5.1
caret offset
, in § 5.1
caret position
, in § 5.1
CaretPosition
, in § 5.1
CaretPositionFromPointOptions
, in § 5
caretPositionFromPoint(x, y)
, in § 5
caretPositionFromPoint(x, y, options)
, in § 5
"center"
, in § 6
change
, in § 4.2.1
checkOpacity
, in § 6
checkVisibility()
, in § 6
checkVisibilityCSS
, in § 6
checkVisibility(options)
, in § 6
CheckVisibilityOptions
, in § 6
clientHeight
, in § 6
clientLeft
, in § 6
clientTop
, in § 6
clientWidth
, in § 6
clientX
attribute for MouseEvent
, in § 10
dict-member for MouseEventInit
, in § 10
clientY
attribute for MouseEvent
, in § 10
dict-member for MouseEventInit
, in § 10
colorDepth
, in § 4.3
constructor(type)
, in § 4.2
constructor(type, eventInitDict)
, in § 4.2
container
, in § 6
"content"
, in § 11.1
contentVisibilityAuto
, in § 6
ConvertCoordinateOptions
, in § 11.1
convertPointFromNode(point, from)
, in § 11.1
convertPointFromNode(point, from, options)
, in § 11.1
convertQuadFromNode(quad, from)
, in § 11.1
convertQuadFromNode(quad, from, options)
, in § 11.1
convertRectFromNode(rect, from)
, in § 11.1
convertRectFromNode(rect, from, options)
, in § 11.1
CSSBoxType
, in § 11.1
currentCSSZoom
, in § 6
determine the device pixel ratio
, in § 4
determine the scroll-into-view position
, in § 6.1
devicePixelRatio
, in § 4
document
, in § 4.2
elementFromPoint(x, y)
, in § 5
elementsFromPoint(x, y)
, in § 5
"end"
, in § 6
ending edges
, in § 2
evaluate media queries and report changes
, in § 4.2
fromBox
, in § 11.1
GeometryNode
, in § 11.1
GeometryUtils
, in § 11.1
getBoundingClientRect()
method for Element
, in § 6
method for Range
, in § 9
getBoxQuads()
, in § 11.1
getBoxQuads(options)
, in § 11.1
getClientRect()
, in § 5.1
getClientRects()
method for Element
, in § 6
method for Range
, in § 9
get the bounding box
, in § 6
height
attribute for Screen
, in § 4.3
attribute for VisualViewport
, in § 12.1
dfn for supported open() feature name
, in § 4.1
inline
, in § 6
innerHeight
, in § 4
innerWidth
, in § 4
"instant"
, in § 4
instant scroll
, in § 3.1
layout viewport
, in § 2
left
dfn for supported open() feature name
, in § 4.1
dict-member for ScrollToOptions
, in § 4
"margin"
, in § 11.1
matches
attribute for MediaQueryList
, in § 4.2
attribute for MediaQueryListEvent
, in § 4.2
dict-member for MediaQueryListEventInit
, in § 4.2
matches state
, in § 4.2
matchMedia(query)
, in § 4
media
attribute for MediaQueryList
, in § 4.2
attribute for MediaQueryListEvent
, in § 4.2
dfn for MediaQueryList
, in § 4.2
dict-member for MediaQueryListEventInit
, in § 4.2
media query list
, in § 4.2
MediaQueryList
, in § 4.2
MediaQueryListEvent
, in § 4.2
MediaQueryListEventInit
, in § 4.2
MediaQueryListEvent(type)
, in § 4.2
MediaQueryListEvent(type, eventInitDict)
, in § 4.2
moveBy(x, y)
, in § 4
moveTo(x, y)
, in § 4
"nearest"
enum-value for ScrollIntoViewContainer
, in § 6
enum-value for ScrollLogicalPosition
, in § 6
normalize non-finite values
, in § 3.2
offset
, in § 5.1
offsetHeight
, in § 7
offsetLeft
attribute for HTMLElement
, in § 7
attribute for VisualViewport
, in § 12.1
offsetNode
, in § 5.1
offsetParent
, in § 7
offsetTop
attribute for HTMLElement
, in § 7
attribute for VisualViewport
, in § 12.1
offsetWidth
, in § 7
offsetX
, in § 10
offsetY
, in § 10
onchange
, in § 4.2
onresize
, in § 12.1
onscroll
, in § 12.1
onscrollend
, in § 12.1
opacityProperty
, in § 6
outerHeight
, in § 4
outerWidth
, in § 4
overflow directions
, in § 2
"padding"
, in § 11.1
pageLeft
, in § 12.1
pageTop
, in § 12.1
pageX
, in § 10
pageXOffset
, in § 4
pageY
, in § 10
pageYOffset
, in § 4
page zoom
, in § 2.2
pending scrollend event targets
, in § 13.2
pending scroll event targets
, in § 13.2
perform a scroll
definition of
, in § 3.1
dfn for viewport
, in § 3.1
pixelDepth
, in § 4.3
potentially scrollable
, in § 2
relativeTo
, in § 11.1
removeListener(callback)
, in § 4.2
resize
, in § 13.3
resizeBy(x, y)
, in § 4
resizeTo(width, height)
, in § 4
run snapshot post-layout state steps
, in § 14
run the resize steps
, in § 13.1
run the scroll steps
, in § 13.2
scale
, in § 12.1
scale factor
, in § 2
Screen
, in § 4.3
screen
, in § 4
screenLeft
, in § 4
screenTop
, in § 4
screenX
attribute for MouseEvent
, in § 10
attribute for Window
, in § 4
dict-member for MouseEventInit
, in § 10
screenY
attribute for MouseEvent
, in § 10
attribute for Window
, in § 4
dict-member for MouseEventInit
, in § 10
scroll
, in § 13.3
scroll()
method for Element
, in § 6
method for Window
, in § 4
scroll an element
, in § 6.1
scroll a target into view
, in § 6.1
ScrollBehavior
, in § 4
scrollBy()
method for Element
, in § 6
method for Window
, in § 4
scrollBy(options)
method for Element
, in § 6
method for Window
, in § 4
scrollBy(x, y)
method for Element
, in § 6
method for Window
, in § 4
scroll completed
, in § 3.1
scrollend
, in § 13.3
scrollHeight
, in § 6
scrolling area
, in § 2
scrolling area origin
, in § 2
scrolling box
, in § 2
scrollingElement
, in § 5
scrollIntoView()
, in § 6
scrollIntoView(arg)
, in § 6
ScrollIntoViewContainer
, in § 6
ScrollIntoViewOptions
, in § 6
scrollLeft
, in § 6
ScrollLogicalPosition
, in § 6
scroll(options)
method for Element
, in § 6
method for Window
, in § 4
ScrollOptions
, in § 4
scrollParent
, in § 7
scrollTo()
method for Element
, in § 6
method for Window
, in § 4
scrollTo(options)
method for Element
, in § 6
method for Window
, in § 4
ScrollToOptions
, in § 4
scrollTop
, in § 6
scroll to the beginning of the document
, in § 3.1
scrollTo(x, y)
method for Element
, in § 6
method for Window
, in § 4
scrollWidth
, in § 6
scrollX
, in § 4
scroll(x, y)
method for Element
, in § 6
method for Window
, in § 4
scrollY
, in § 4
set up browsing context features
, in § 4.1
shadowRoots
, in § 5
"smooth"
, in § 4
smooth scroll
, in § 3.1
smooth scroll aborted
, in § 3.1
smooth scroll completed
, in § 3.1
"start"
, in § 6
supported open() feature name
, in § 4.1
SVG layout box
, in § 2
toBox
, in § 11.1
top
dfn for supported open() feature name
, in § 4.1
dict-member for ScrollToOptions
, in § 4
transforms
, in § 2
visibilityProperty
, in § 6
visual viewport
, in § 2
VisualViewport
, in § 12.1
visualViewport
, in § 4
Web-exposed available screen area
, in § 2.3
Web-exposed screen area
, in § 2.3
width
attribute for Screen
, in § 4.3
attribute for VisualViewport
, in § 12.1
dfn for supported open() feature name
, in § 4.1
attribute for HTMLImageElement
, in § 8
attribute for MouseEvent
, in § 10
attribute for HTMLImageElement
, in § 8
attribute for MouseEvent
, in § 10
Terms defined by reference
[CSS-ALIGN-3]
defines the following terms:
content-distribution properties
[CSS-BACKGROUNDS-3]
defines the following terms:
double
[CSS-BORDERS-4]
defines the following terms:
border-left-width
border-top-width
[CSS-BOX-4]
defines the following terms:
border box
border edge
margin edge
padding edge
[CSS-BREAK-4]
defines the following terms:
box fragment
[CSS-COLOR-4]
defines the following terms:
opacity
[CSS-CONTAIN-2]
defines the following terms:
content-visibility
skips its contents
[CSS-DEVICE-ADAPT]
defines the following terms:
effective zoom
scaled
unscaled
zoom
[CSS-DISPLAY-4]
defines the following terms:
anonymous
block box
block-level
box
box tree
containing block
display
initial containing block
inline-level box
inline-table
invisible
principal box
root element
table
table-column
table-column-group
[CSS-OVERFLOW-3]
defines the following terms:
auto
(for overflow)
auto
(for scroll-behavior)
classic scrollbars
clip
overflow
overflow-x
overflow-y
scroll container
scroll-behavior
smooth
visible
[CSS-POSITION-3]
defines the following terms:
fixed
position
static
[CSS-PSEUDO-4]
defines the following terms:
CSSPseudoElement
[CSS-SCOPING-1]
defines the following terms:
flat tree
shadow root
[CSS-SCROLL-SNAP-1]
defines the following terms:
scroll snap
scroll snap container
scroll snap position
scroll-snap-type
[CSS-SCROLL-SNAP-2]
defines the following terms:
dispatch pending scrollsnapchange events
dispatch pending scrollsnapchanging events
eventual snap target
update scrollsnapchange targets
update scrollsnapchanging targets
[CSS-TEXT-4]
defines the following terms:
typographic character unit
[CSS-UI-4]
defines the following terms:
pointer-events
[CSS-VALUES-4]
defines the following terms:
px
reference pixel
[CSS-WRITING-MODES-4]
defines the following terms:
block flow direction
block-end
inline base direction
inline-end
[CSS2]
defines the following terms:
canvas
viewport
[CSSOM]
defines the following terms:
CSSOMString
parse a media query list
serialize a media query list
[CSSOM-VIEW-1]
defines the following terms:
MouseEventInit
[DOM]
defines the following terms:
Document
Element
Event
EventInit
EventListener
EventTarget
Node
Range
ShadowRoot
Text
add an event listener
addEventListener(type, callback)
callback
capture
closed-shadow-hidden
dispatch flag
document
element
element
(for Attr)
end node
end offset
event listener
event listener list
fire an event
host
index
isTrusted
node
node document
nodes
parent
parent element
quirks mode
range
remove an event listener
removeEventListener(type, callback)
root
shadow-including inclusive ancestor
start node
start offset
type
[GEOMETRY-1]
defines the following terms:
DOMPoint
DOMPointInit
DOMQuad
DOMQuadInit
DOMRect
DOMRectList
DOMRectReadOnly
height
width
[HTML]
defines the following terms:
EventHandler
HTMLElement
HTMLImageElement
Window
WindowProxy
active document
associated Document
auxiliary browsing context
being rendered
body
browsing context
defaultView
event handler
event handler event type
event handler IDL attribute
event loop
fully active
HTML elements
live
open(url, target, features)
relevant global object
rules for parsing integers
same origin
the body element
[INFRA]
defines the following terms:
contain
exist
is
map
tuple
[MEDIAQUERIES-5]
defines the following terms:
color
[SELECTORS-4]
defines the following terms:
pseudo-element
[SVG2]
defines the following terms:
rect
[UIEVENTS]
defines the following terms:
MouseEvent
[WEBIDL]
defines the following terms:
Exposed
NewObject
Replaceable
SameObject
boolean
converted to an IDL value
double
long
sequence
this
undefined
unrestricted double
unsigned long
References
Normative References
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr..
CSS Box Alignment Module Level 3
. 11 March 2025. WD. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. 11 March 2024. CRD. URL:
[CSS-BORDERS-4]
Elika Etemad; et al.
CSS Borders and Box Decorations Module Level 4
. 22 July 2025. FPWD. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. 4 August 2024. WD. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. 18 December 2018. FPWD. URL:
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou.
CSS Color Module Level 4
. 24 April 2025. CRD. URL:
[CSS-CONTAIN-2]
Tab Atkins Jr.; Florian Rivoal; Vladimir Levin.
CSS Containment Module Level 2
. 17 September 2022. WD. URL:
[CSS-DEVICE-ADAPT]
Florian Rivoal; Emilio Cobos Álvarez.
CSS Viewport Module Level 1
. 25 January 2024. FPWD. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. 19 December 2024. FPWD. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. 29 March 2023. WD. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. 11 March 2025. WD. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 27 June 2025. WD. URL:
[CSS-SCOPING-1]
Tab Atkins Jr.; Elika Etemad.
CSS Scoping Module Level 1
. 3 April 2014. FPWD. URL:
[CSS-SCROLL-SNAP-1]
Matt Rakow; et al.
CSS Scroll Snap Module Level 1
. 11 March 2021. CR. URL:
[CSS-SCROLL-SNAP-2]
Elika Etemad; Tab Atkins Jr.; Adam Argyle.
CSS Scroll Snap Module Level 2
. 23 July 2024. FPWD. URL:
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal.
CSS Text Module Level 3
. 30 September 2024. CRD. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. 29 May 2024. WD. URL:
[CSS-TRANSFORMS-1]
Simon Fraser; et al.
CSS Transforms Module Level 1
. 14 February 2019. CR. URL:
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. 22 March 2024. CRD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. 30 July 2019. CR. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. 7 June 2011. REC. URL:
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[CSSOM-VIEW-1]
Simon Pieters.
CSSOM View Module
. 17 March 2016. WD. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
[GEOMETRY-1]
Simon Pieters; Chris Harrelson.
Geometry Interfaces Module Level 1
. 4 December 2018. CR. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[INFRA]
Anne van Kesteren; Domenic Denicola.
Infra Standard
. Living Standard. URL:
[MEDIAQUERIES-5]
Dean Jackson; et al.
Media Queries Level 5
. 18 December 2021. WD. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. 11 November 2022. WD. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. 4 October 2018. CR. URL:
[UIEVENTS]
Gary Kacmarcik; Travis Leithead.
UI Events
. 7 September 2024. WD. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
Informative References
[CSS-UI-4]
Florian Rivoal.
CSS Basic User Interface Module Level 4
. 16 March 2021. WD. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. 10 December 2019. REC. URL:
IDL Index
enum
ScrollBehavior
"auto"
"instant"
"smooth"
};
dictionary
ScrollOptions
ScrollBehavior
behavior
= "auto";
};
dictionary
ScrollToOptions
ScrollOptions
unrestricted
double
left
unrestricted
double
top
};
partial
interface
Window
NewObject
MediaQueryList
matchMedia
CSSOMString
query
);
SameObject
Replaceable
readonly
attribute
Screen
screen
SameObject
Replaceable
readonly
attribute
VisualViewport
visualViewport