Resize Observer
Resize Observer
W3C First Public Working Draft,
11 February 2020
This version:
Latest published version:
Editor's Draft:
Editors:
Aleks Totic
Google
Greg Whitworth
Microsoft
Suggest an Edit for this Spec:
GitHub Editor
Issue Tracking:
GitHub Issues
W3C
MIT
ERCIM
Keio
Beihang
). W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This specification describes an API for observing changes to Element’s size.
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. Other documents may supersede this document. A list of
current W3C publications and the latest revision of this technical report
can be found in the
W3C technical reports
index at https://www.w3.org/TR/.
This document is a
First Public Working Draft
Publication as a First Public Working Draft does not imply endorsement by the W3C
Membership. 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 work in progress.
GitHub Issues
are preferred for discussion of this specification.
When filing an issue, please put the text “resize-observer” in the title,
preferably like this:
“[resize-observer]
…summary of comment…
”.
All issues and comments are
archived
and there is also a
historical archive
This document was produced by the
CSS Working Group
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 which the individual believes contains
Essential
Claim(s)
must disclose the information in accordance with
section
6 of the W3C Patent Policy
This document is governed by the
1 March 2019 W3C Process Document
1.
Introduction
This section is non-normative.
Responsive Web Components need to respond to
Element
's
size changes. An example is an
Element
that displays a map:
it displays a map by tiling its content box with
Element
tiles.
when resized, it must redo the tiling.
Responsive Web Applications can already respond to
viewport
size changes.
This is done with CSS media queries, or window.
resize
event.
The ResizeObserver API is an interface for observing changes
to Element’s size. It is an
Element
's
counterpart to window.
resize
event.
ResizeObserver’s notifications can be used to respond to changes in
Element
's size. Some interesting facts about these observations:
Observation will fire when watched Element is inserted/removed from DOM.
Observation will fire when watched Element
display
gets set to none.
Observations do not fire for non-replaced inline Elements.
Observations will not be triggered by CSS transforms.
Observation will fire when observation starts if Element is
being rendered
, and Element’s size is not 0,0.
canvas
id
"elipse"
style
"display:block"
>canvas
div
id
"menu"
style
"display:block;width:100px"
img
src
"hamburger.jpg"
style
"width:24px;height:24px"
class
"title"
menu title
div
// In response to resize, elipse paints an elipse inside a canvas
document
querySelector
'#elipse'
).
handleResize
entry
=>
entry
target
width
entry
borderBoxSize
].
inlineSize
entry
target
height
entry
borderBoxSize
].
blockSize
let
rx
Math
floor
entry
target
width
);
let
ry
Math
floor
entry
target
height
);
let
ctx
entry
target
getContext
'2d'
);
ctx
beginPath
();
ctx
ellipse
rx
ry
rx
ry
Math
PI
);
ctx
stroke
();
// In response to resize, change title visibility depending on width
document
querySelector
'#menu'
).
handleResize
entry
=>
let
title
entry
target
querySelector
".title"
if
entry
borderBoxSize
].
inlineSize
40
title
style
display
"none"
else
title
style
display
"inline-block"
var
ro
new
ResizeObserver
entries
=>
for
let
entry
of
entries
let
cs
window
getComputedStyle
entry
target
);
console
log
'watching element:'
entry
target
);
console
log
entry
contentRect
top
' is '
cs
paddingTop
);
console
log
entry
contentRect
left
' is '
cs
paddingLeft
);
console
log
entry
borderBoxSize
].
inlineSize
' is '
cs
width
);
console
log
entry
borderBoxSize
].
blockSize
' is '
cs
height
);
if
entry
target
handleResize
entry
target
handleResize
entry
);
});
ro
observe
document
querySelector
'#elipse'
));
ro
observe
document
querySelector
'#menu'
));
2.
Resize Observer API
2.1.
ResizeObserver interface
The ResizeObserver interface is used to observe changes to
Element
's
size.
It is modeled after
MutationObserver
and
IntersectionObserver
enum
ResizeObserverBoxOptions
"border-box"
"content-box"
"device-pixel-content-box"
};
ResizeObserver can observe different kinds of CSS sizes:
border-box
: size of
box border area
as defined in CSS2.
content-box
: size of
content area
as defined in CSS2.
device-pixel-content-box
: size of
content area
as defined in CSS2, in device pixels,
before applying any CSS transforms on the element or its ancestors.
This size must contain integer values.
The
device-pixel-content-box
can be approximated by multiplying
devicePixelRatio
by the
content-box
size.
However, due to browser-specific subpixel snapping behavior,
authors cannot determine the correct way to round this scaled
content-box
size.
How a UA computes the device pixel box for an element is implementation-dependent.
One possible implementation could be to multiply the box size and position by the device pixel ratio,
then round both the resulting floating-point size and position of the box to integer values,
in a way that maximizes the quality of the rendered output.
Note that this size can be affected by position changes to the target,
and thus is typically more expensive to observe than the other sizes.
dictionary
ResizeObserverOptions
ResizeObserverBoxOptions
box
= "content-box";
};
This section is non-normative. An author may desire to observe more than one CSS box.
In this case, author will need to use multiple ResizeObservers.
// Observe the content-box
ro
observe
document
querySelector
'#menu'
),
box
'content-box'
});
// Observe just the border box. Replaces previous observation.
ro1
observe
document
querySelector
'#menu'
),
box
'border-box'
});
This does not have any impact on which box dimensions are returned to the defined callback when the event is fired,
it solely defines which box the author wishes to observe layout changes on.
Exposed
=(
Window
),
Constructor
ResizeObserverCallback
callback
)]
interface
ResizeObserver
void
observe
Element
target
optional
ResizeObserverOptions
options
);
void
unobserve
Element
target
);
void
disconnect
();
};
new ResizeObserver(callback)
Let
this
be a new
ResizeObserver
object.
Set
this
callback
internal slot to callback.
Set
this
observationTargets
internal slot to an empty list.
Add
this
to
Document
resizeObservers
slot.
observe(target, options)
Adds target to the list of observed elements.
If
target
is in
observationTargets
slot, call unobserve(
target
).
Let
resizeObservation
be new
ResizeObservation
target
options
).
Add the
resizeObservation
to the
observationTargets
slot.
unobserve(target)
Removes
target
from the list of observed elements.
Let
observation
be
ResizeObservation
in
observationTargets
whose target slot is
target
If
observation
is not found, return.
Remove
observation
from
observationTargets
disconnect()
Clear the
observationTargets
list.
Clear the
activeTargets
list.
2.2.
ResizeObserverCallback
callback
ResizeObserverCallback
void
sequence
ResizeObserverEntry
entries
ResizeObserver
observer
);
This callback delivers
ResizeObserver
's notifications. It is invoked by a
broadcast active observations
algorithm.
2.3.
ResizeObserverEntry
Exposed
Window
interface
ResizeObserverEntry
readonly
attribute
Element
target
readonly
attribute
DOMRectReadOnly
contentRect
readonly
attribute
sequence
ResizeObserverSize
borderBoxSize
readonly
attribute
sequence
ResizeObserverSize
contentBoxSize
readonly
attribute
sequence
ResizeObserverSize
devicePixelContentBoxSize
};
contentRect is from the incubation phase of ResizeObserver and is only included for current web compat reasons. It may be deprecated in future levels.
target
of type
Element
, readonly
The
Element
whose size has changed.
contentRect
of type
DOMRectReadOnly
, readonly
Element
's
content rect
when
ResizeObserverCallback
is invoked.
borderBoxSize
of type sequence<
ResizeObserverSize
>, readonly
A sequence containing the
Element
's
border box
size when
ResizeObserverCallback
is invoked.
contentBoxSize
of type sequence<
ResizeObserverSize
>, readonly
A sequence containing the
Element
's
content rect
size when
ResizeObserverCallback
is invoked.
devicePixelContentBoxSize
of type sequence<
ResizeObserverSize
>, readonly
A sequence containing the
Element
's
content rect
size in integral device pixels when
ResizeObserverCallback
is invoked.
The box size properties are exposed as sequences in order to support elements that have multiple fragments,
which occur in
multi-column
scenarios.
However the current definitions of
content rect
and
border box
do not mention how those boxes are affected by
multi-column
layout.
In this spec, there will only be a single ResizeObserverSize returned in the sequences,
which will correspond to the dimensions of the first column.
A future version of this spec will extend the returned sequences to contain the per-fragment size information.
interface
ResizeObserverSize
readonly
attribute
unrestricted
double
inlineSize
readonly
attribute
unrestricted
double
blockSize
};
3.
Processing Model
3.1.
ResizeObservation example struct
This section is non-normative. ResizeObservation is an example struct that can be used in implementation of Resize Observer. It is being
included here in order to help provide clarity during the processing model. It effectively holds observation information for a single
Element
. This
interface is not visible to Javascript.
Constructor
Element
target
interface
ResizeObservation
readonly
attribute
Element
target
readonly
attribute
ResizeObserverBoxOptions
observedBox
readonly
attribute
sequence
ResizeObserverSize
lastReportedSizes
};
target
of type
Element
, readonly
The observed
Element
observedBox
of type
ResizeObserverBoxOptions
, readonly
Which box is being observed.
lastReportedSizes
of type sequence<
ResizeObserverSize
>, readonly
Ordered sequence of last reported sizes.
new ResizeObservation(target, observedBox)
Let
this
be a new
ResizeObservation
object
Set
this
internal
target
slot to
target
Set
this
internal
observedBox
slot to
observedBox
Set
this
internal
lastReportedSizes
slot to [(0,0)]
isActive()
Set
currentSize
by
calculate box size
given
target
and
observedBox
Return true if
currentSize
is not equal to the first entry in this.
lastReportedSizes
Return false.
3.2.
Internal Slot Definitions
3.2.1.
Document
Document
has a
resizeObservers
slot that is a list of
ResizeObserver
s in this document. It is initialized to empty.
3.2.2.
ResizeObserver
ResizeObserver
has a
callback
slot, initialized by constructor.
ResizeObserver
has an
observationTargets
slot, which is a list of
ResizeObservation
s.
It represents all Elements being observed.
ResizeObserver
has a
activeTargets
slot, which is a list of
ResizeObservation
s. It represents all Elements whose size has changed since last observation broadcast that are eligible for broadcast.
ResizeObserver
has a
skippedTargets
slot, which is a list of
ResizeObservation
s. It represents all Elements whose size has changed since last observation broadcast that are
not
eligible for broadcast
3.3.
CSS Definitions
3.3.1.
content rect
DOM
content rect
is a rect whose:
width is
content width
height is
content height
top is
padding top
left is
padding left
content width
spec does not mention how
multi-column
layout affects content box. In this spec, content width of an
Element
inside
multi-column
is the result of
getComputedStyle(element).width
. This currently evaluates to width of the first column.
Having content rect position be padding-top/left is useful for absolute positioning of target’s children. Absolute position coordinate space origin is topLeft of the padding rect.
Watching content rect means that:
observation will fire when watched Element is inserted/removed from DOM.
observation will fire when watched Element display gets set to none.
non-replaced inline Elements will always have an empty content rect.
observations will not be triggered by CSS transforms.
Web content can also contain SVG elements. SVG Elements define
bounding box
instead of a content box.
Content rect for
SVGGraphicsElement
s is a rect whose:
width is
bounding box
width
height is
bounding box
height
top and left are 0
3.4.
Algorithms
3.4.1.
Gather active observations at depth
It computes all active observations for a
document
. To
gather active observations at depth
, run these steps:
Let
depth
be the depth passed in.
For each
observer
in
resizeObservers
run these steps:
Clear
observer
’s
activeTargets
, and
skippedTargets
For each
observation
in
observer
observationTargets
run this step:
If
observation
isActive()
is true
Let
targetDepth
be result of
calculate depth for node
for
observation
target
If
targetDepth
is greater than
depth
then add
observation
to
activeTargets
Else add
observation
to
skippedTargets
3.4.2.
Has active observations
To determine if
Document
has active observations
run these steps:
For each
observer
in
resizeObservers
run this step:
If
observer
activeTargets
is not empty, return true.
return false.
3.4.3.
Has skipped observations
To determine if
Document
has skipped observations
run these steps:
For each
observer
in
resizeObservers
run this step:
If
observer
skippedTargets
is not empty, return true.
return false.
3.4.4.
Create and populate a ResizeObserverEntry
To
create and populate a ResizeObserverEntry
for a given
target
run these steps:
Let
this
be a new
ResizeObserverEntry
Set
this
target
slot to
target
Set
this
borderBoxSize
slot to result of
computing size given
target
and observedBox of "border-box"
Set
this
contentBoxSize
slot to result of
computing size given
target
and observedBox of "content-box"
Set
this
devicePixelContentBoxSize
slot to result of
computing size given
target
and observedBox of "device-pixel-content-box"
Set
this
contentRect
to logical
this
contentBoxSize
given
target
and observedBox of "content-box".
If
target
is not an SVG element do these steps:
Set
this
contentRect
.top to
target
padding top
Set
this
contentRect
.left to
target
padding left
If
target
is an SVG element do these steps:
Set
this
contentRect
.top and
this
.contentRect.left to 0.
3.4.5.
Broadcast active observations
broadcast active observations
delivers all active observations
in a document, and returns the depth of the shallowest broadcast target depth.
To broadcast active observations for a
document
run these steps:
Let
shallowestTargetDepth
be ∞
For each
observer
in
document
resizeObservers
run these steps:
If
observer
activeTargets
slot is empty, continue.
Let
entries
be an empty list of
ResizeObserverEntry
ies.
For each
observation
in
activeTargets
perform these steps:
Let
entry
be the result of running
create and populate a ResizeObserverEntry
given
observation
target
Add
entry
to
entries
Set
observation
lastReportedSizes
to matching
entry
sizes.
Matching sizes are
entry
borderBoxSize
if
observation
observedBox
is "border-box"
Matching sizes are
entry
contentBoxSize
if
observation
observedBox
is "content-box"
Matching sizes are
entry
devicePixelContentBoxSize
if
observation
observedBox
is "device-pixel-content-box"
Set
targetDepth
to the result of
calculate depth for node
for
observation
target
Set
shallowestTargetDepth
to
targetDepth
if
targetDepth
shallowestTargetDepth
Invoke
observer
callback
with
entries
Clear
observer
activeTargets
Return
shallowestTargetDepth
3.4.6.
Deliver Resize Loop Error
To
deliver resize loop error notification
run these steps:
Create a new
ErrorEvent
Initialize
event
’s message slot to "ResizeObserver loop completed with undelivered notifications.".
Report the exception
event
3.4.7.
Calculate depth for node
To
calculate depth for node
, given a
node
, run these steps:
Let
be the parent-traversal path from
node
to a root Element of this element’s flattened DOM tree.
Return number of nodes in
3.4.8.
Calculate box size, given target and observed box
This algorithm computes
target
Element
's observed box size. Type of box is
described by
ResizeObserverBoxOptions
SVG Elements are an exception. SVG size is always its bounding box size, because SVG
elements do not use standard CSS box model.
To
calculate box size
, given
target
and
observedBox
, run these steps:
If
target
is an
SVGGraphicsElement
Set
computedSize
.inlineSize to
target
’s
bounding box
inline length.
Set
computedSize
.blockSize to
target
’s
bounding box
block length.
If
target
is not an
SVGGraphicsElement
If
observedBox
is "border-box"
Set
computedSize
.inlineSize to target’s
border area
inline length.
Set
computedSize
.blockSize to target’s
border area
block length.
If
observedBox
is "content-box"
Set
computedSize
.inlineSize to target’s
content area
inline length.
Set
computedSize
.blockSize to target’s
content area
block length.
If
observedBox
is "device-pixel-content-box"
Set
computedSize
.inlineSize to target’s
content area
inline length, in integral device pixels.
Set
computedSize
.blockSize to target’s
content area
block length, in integral device pixels.
return
computedSize
3.5.
ResizeObserver Lifetime
ResizeObserver
will remain alive until both of these conditions are met:
there are no scripting references to the observer.
the observer is not observing any targets.
3.6.
External Spec Integrations
3.6.1.
HTML Processing Model: Event Loop
ResizeObserver
processing happens inside the step 7.12 of the
HTML Processing Model
event loop.
Step 12 is currently underspecified as:
For each fully active Document in docs, update the rendering or user interface of that Document and its browsing context to reflect the current state.
Existing step 12 can be fully specified as:
For each fully active Document in docs, run the following steps for that Document and its browsing contents:
Recalc styles
Update layout
Paint
ResizeObserver
extends step 12 with resize notifications.
It tries to deliver all pending notifications by looping
until no pending notifications are available. This can cause
an infinite loop.
Infinite loop is prevented by shrinking the set of
nodes that can notify at every iteration. In each iteration,
only nodes deeper than the shallowest node in previous iteration
can notify.
An error is generated if notification loop completes, and there
are undelivered notifications. Elements with undelivered notifications
will be considered for delivery in the next loop.
Step 12 with
ResizeObserver
notifications is:
For each fully active Document in docs, run the following steps for that Document and its browsing context:
Recalc styles
Update layout
Set
depth
to 0
Gather active observations at depth
depth
for
Document
Repeat while document
has active observations
Set
depth
to
broadcast active observations
Recalc styles
Update layout
Gather active observations at depth
depth
for
Document
If
Document
has skipped observations
then
deliver resize loop error notification
Update the rendering or user interface of
Document
and its browsing context to reflect the current state.
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.
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.
Requirements for Responsible Implementation of CSS
The following sections define several conformance requirements
for implementing CSS responsibly,
in a way that promotes interoperability in the present and future.
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 property 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.
Implementations of CR-level Features
Once a specification reaches the Candidate Recommendation stage,
implementers should release an
unprefixed
implementation
of any CR-level feature they can demonstrate
to be correctly implemented according to spec,
and should avoid exposing a prefixed variant of that feature.
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
activeTargets
, in §3.2.2
blockSize
, in §2.3
"border-box"
, in §2.1
borderBoxSize
, in §2.3
box
, in §2.1
broadcast active observations
, in §3.4.5
calculate box size
, in §3.4.8
calculate depth for node
, in §3.4.7
callback
, in §3.2.2
"content-box"
, in §2.1
contentBoxSize
, in §2.3
content rect
, in §3.3.1
contentRect
, in §2.3
create and populate a ResizeObserverEntry
, in §3.4.4
deliver resize loop error notification
, in §3.4.6
"device-pixel-content-box"
, in §2.1
devicePixelContentBoxSize
, in §2.3
disconnect()
, in §2.1
gather active observations at depth
, in §3.4.1
has active observations
, in §3.4.2
has skipped observations
, in §3.4.3
inlineSize
, in §2.3
isActive()
, in §3.1
lastReportedSizes
, in §3.1
observationTargets
, in §3.2.2
observedBox
, in §3.1
observe(target)
, in §2.1
observe(target, options)
, in §2.1
ResizeObservation
, in §3.1
ResizeObservation(target)
, in §3.1
ResizeObservation(target, options)
, in §3.1
ResizeObserver
, in §2.1
ResizeObserverBoxOptions
, in §2.1
ResizeObserver(callback)
, in §2.1
ResizeObserverCallback
, in §2.2
ResizeObserverEntry
, in §2.3
ResizeObserverOptions
, in §2.1
resizeObservers
, in §3.2.1
ResizeObserverSize
, in §2.3
skippedTargets
, in §3.2.2
target
attribute for ResizeObservation
, in §3.1
attribute for ResizeObserverEntry
, in §2.3
unobserve(target)
, in §2.1
Referenced in:
3.4.8. Calculate box size, given target and observed box
(2)
Referenced in:
2.3. ResizeObserverEntry
(2)
Referenced in:
1. Introduction
(2)
Referenced in:
2.1. ResizeObserver interface
3.4.2. Has active observations
3.4.3. Has skipped observations
3.6.1. HTML Processing Model: Event Loop
(2)
(3)
(4)
Referenced in:
1. Introduction
(2)
(3)
(4)
(5)
2.1. ResizeObserver interface
(2)
(3)
2.3. ResizeObserverEntry
(2)
(3)
(4)
(5)
(6)
(7)
3.1. ResizeObservation example struct
(2)
(3)
(4)
(5)
3.3.1. content rect
3.4.8. Calculate box size, given target and observed box
Referenced in:
2.1. ResizeObserver interface
Referenced in:
3.2.1. Document
Referenced in:
2.3. ResizeObserverEntry
(2)
Referenced in:
3.4.6. Deliver Resize Loop Error
Referenced in:
3.4.8. Calculate box size, given target and observed box
(2)
Referenced in:
2.1. ResizeObserver interface
2.3. ResizeObserverEntry
Referenced in:
2.3. ResizeObserverEntry
(2)
Terms defined by reference
[css-box-3]
defines the following terms:
border area
border box
[cssom-view-1]
defines the following terms:
resize
[DOM]
defines the following terms:
Document
Element
MutationObserver
document
[geometry-1]
defines the following terms:
DOMRectReadOnly
[HTML]
defines the following terms:
ErrorEvent
[SVG2]
defines the following terms:
SVGGraphicsElement
[WebIDL]
defines the following terms:
Exposed
unrestricted double
References
Normative References
[CSS-BOX-3]
Elika Etemad.
CSS Box Model Module Level 3
. 18 December 2018. 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:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. 4 October 2018. CR. URL:
[WebIDL]
Boris Zbarsky.
Web IDL
. 15 December 2016. ED. URL:
IDL Index
enum
ResizeObserverBoxOptions
"border-box"
"content-box"
"device-pixel-content-box"
};
dictionary
ResizeObserverOptions
ResizeObserverBoxOptions
box
= "content-box";
};

Exposed
=(
Window
),
Constructor
ResizeObserverCallback
callback
)]
interface
ResizeObserver
void
observe
Element
target
optional
ResizeObserverOptions
options
);
void
unobserve
Element
target
);
void
disconnect
();
};
callback
ResizeObserverCallback
void
sequence
ResizeObserverEntry
entries
ResizeObserver
observer
);

Exposed
Window
interface
ResizeObserverEntry
readonly
attribute
Element
target
readonly
attribute
DOMRectReadOnly
contentRect
readonly
attribute
sequence
ResizeObserverSize
borderBoxSize
readonly
attribute
sequence
ResizeObserverSize
contentBoxSize
readonly
attribute
sequence
ResizeObserverSize
devicePixelContentBoxSize
};
interface
ResizeObserverSize
readonly
attribute
unrestricted
double
inlineSize
readonly
attribute
unrestricted
double
blockSize
};

Constructor
Element
target
interface
ResizeObservation
readonly
attribute
Element
target
readonly
attribute
ResizeObserverBoxOptions
observedBox
readonly
attribute
sequence
ResizeObserverSize
lastReportedSizes
};
#enumdef-resizeobserverboxoptions
Referenced in:
2.1. ResizeObserver interface
3.1. ResizeObservation example struct
(2)
3.4.8. Calculate box size, given target and observed box
#dom-resizeobserverboxoptions-border-box
Referenced in:
2.1. ResizeObserver interface
#dom-resizeobserverboxoptions-content-box
Referenced in:
2.1. ResizeObserver interface
(2)
(3)
#dom-resizeobserverboxoptions-device-pixel-content-box
Referenced in:
2.1. ResizeObserver interface
(2)
#dictdef-resizeobserveroptions
Referenced in:
2.1. ResizeObserver interface
#resizeobserver
Referenced in:
2.1. ResizeObserver interface
2.2. ResizeObserverCallback
(2)
3.2.1. Document
3.2.2. ResizeObserver
(2)
(3)
(4)
3.5. ResizeObserver Lifetime
3.6.1. HTML Processing Model: Event Loop
(2)
(3)
#dom-resizeobserver-resizeobserver
Referenced in:
2.1. ResizeObserver interface
#dom-resizeobserver-observe
Referenced in:
2.1. ResizeObserver interface
#dom-resizeobserver-unobserve
Referenced in:
2.1. ResizeObserver interface
#dom-resizeobserver-disconnect
Referenced in:
2.1. ResizeObserver interface
#callbackdef-resizeobservercallback
Referenced in:
2.1. ResizeObserver interface
2.3. ResizeObserverEntry
(2)
(3)
(4)
#resizeobserverentry
Referenced in:
2.2. ResizeObserverCallback
3.4.4.
Create and populate a ResizeObserverEntry
3.4.5. Broadcast active observations
#dom-resizeobserverentry-target
Referenced in:
2.3. ResizeObserverEntry
3.4.4.
Create and populate a ResizeObserverEntry
#dom-resizeobserverentry-contentrect
Referenced in:
2.3. ResizeObserverEntry
3.4.4.
Create and populate a ResizeObserverEntry
#dom-resizeobserverentry-borderboxsize
Referenced in:
2.3. ResizeObserverEntry
3.4.4.
Create and populate a ResizeObserverEntry
3.4.5. Broadcast active observations
#dom-resizeobserverentry-contentboxsize
Referenced in:
2.3. ResizeObserverEntry
3.4.4.
Create and populate a ResizeObserverEntry
(2)
3.4.5. Broadcast active observations
#dom-resizeobserverentry-devicepixelcontentboxsize
Referenced in:
2.3. ResizeObserverEntry
3.4.4.
Create and populate a ResizeObserverEntry
3.4.5. Broadcast active observations
#resizeobserversize
Referenced in:
2.3. ResizeObserverEntry
(2)
(3)
(4)
(5)
(6)
3.1. ResizeObservation example struct
(2)
#resizeobservation
Referenced in:
2.1. ResizeObserver interface
(2)
3.1. ResizeObservation example struct
3.2.2. ResizeObserver
(2)
(3)
#dom-resizeobservation-target
Referenced in:
3.1. ResizeObservation example struct
(2)
3.4.1. Gather active observations at depth
3.4.5. Broadcast active observations
(2)
#dom-resizeobservation-observedbox
Referenced in:
3.1. ResizeObservation example struct
(2)
3.4.5. Broadcast active observations
(2)
(3)
#dom-resizeobservation-lastreportedsizes
Referenced in:
3.1. ResizeObservation example struct
(2)
(3)
3.4.5. Broadcast active observations
#dom-resizeobservation-isactive
Referenced in:
3.4.1. Gather active observations at depth
#dom-document-resizeobservers
Referenced in:
3.4.1. Gather active observations at depth
3.4.2. Has active observations
3.4.3. Has skipped observations
3.4.5. Broadcast active observations
#dom-resizeobserver-callback
Referenced in:
3.4.5. Broadcast active observations
#dom-resizeobserver-observationtargets
Referenced in:
2.1. ResizeObserver interface
(2)
(3)
(4)
3.4.1. Gather active observations at depth
#dom-resizeobserver-activetargets
Referenced in:
2.1. ResizeObserver interface
3.4.1. Gather active observations at depth
(2)
3.4.2. Has active observations
3.4.5. Broadcast active observations
(2)
(3)
#dom-resizeobserver-skippedtargets
Referenced in:
3.4.1. Gather active observations at depth
(2)
3.4.3. Has skipped observations
#content-rect
Referenced in:
2.3. ResizeObserverEntry
(2)
(3)
(4)
#gather-active-observations-at-depth
Referenced in:
3.6.1. HTML Processing Model: Event Loop
(2)
#has-active-observations
Referenced in:
3.6.1. HTML Processing Model: Event Loop
#has-skipped-observations
Referenced in:
3.6.1. HTML Processing Model: Event Loop
#create-and-populate-a-resizeobserverentry
Referenced in:
3.4.5. Broadcast active observations
#broadcast-active-observations
Referenced in:
2.2. ResizeObserverCallback
3.6.1. HTML Processing Model: Event Loop
#deliver-resize-loop-error-notification
Referenced in:
3.6.1. HTML Processing Model: Event Loop
#calculate-depth-for-node
Referenced in:
3.4.1. Gather active observations at depth
3.4.5. Broadcast active observations
#calculate-box-size①
Referenced in:
3.1. ResizeObservation example struct