index.bs

<pre class='metadata'>
Title: Intersection Observer
Status: ED
ED: https://w3c.github.io/IntersectionObserver/
Shortname: intersection-observer
TR: https://www.w3.org/TR/intersection-observer/
Level: 1
Editor: Stefan Zager, Google, szager@google.com
Former Editor: Michael Blain, Google, mpb@google.com
Abstract: This specification describes  an API that can be used to understand the visibility and position of DOM elements ("targets") relative to a containing element or to the top-level viewport ("root"). The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content.
Group: webplatform
Repository: W3C/IntersectionObserver
Test Suite: http://w3c-test.org/intersection-observer/
Ignored Vars: rootMargin, docs
</pre>

<pre class="anchors">
urlPrefix: https://dom.spec.whatwg.org/
	url: #node-trees; type: dfn; text: node tree
urlPrefix: http://www.w3.org/TR/hr-time/
	type: typedef; text: DOMHighResTimeStamp
	type: dfn; text: time origin
urlPrefix: https://html.spec.whatwg.org/multipage/
	urlPrefix: dom.html
		url: #the-document-object; type:dfn; text: Document
	urlPrefix: browsers.html
		type: dfn; text: unit of related similar-origin browsing contexts
		type: dfn; text: browsing context
		type: dfn; text: top-level browsing context
		type: dfn; text: nested browsing contexts
		type: dfn; text: browsing context container
		type: dfn; text: fully active
	urlPrefix: webappapis.html;
		type: dfn; text: report the exception
		type: dfn; text: event loop
		type: dfn; text: queue a task
		type: dfn; text: run the fullscreen rendering steps
		type: dfn; text: run the animation frame callbacks
		url: #processing-model-8; type: dfn; text: HTML Processing Model
	urlPrefix: infrastructure.html;
		type: dfn; text: rules for parsing dimension values
		url: #dfn-callback-this-value; type: dfn; text: callback this value
urlPrefix: https://heycam.github.io/webidl/
	url: #dfn-simple-exception; type:exception;
		text: RangeError
		text: TypeError
		text: SyntaxError
	urlPrefix: #dfn-; type:dfn; text: throw
	urlPrefix: #idl-; type:interface; text: double
	url: #hierarchyrequesterror; type: exception; text: HierarchyRequestError
urlPrefix: https://drafts.csswg.org/css-box/
	url: #viewport; type: dfn; text: viewport
	url: #containing-block; type: dfn; text: containing block
	url: #content-area; type: dfn; text: content area
urlPrefix: https://drafts.csswg.org/css-display/
	url: #containing-block-chain; type: dfn; text: containing block chain
urlPrefix: http://www.w3.org/TR/css-masking-1/
	url: #propdef-clip-path; type:dfn; text: clip-path
urlPrefix: https://drafts.csswg.org/cssom-view-1/
	url: #pinch-zoom; type:dfn; text: pinch zoom
</pre>

<pre class="link-defaults">
spec: css-values-3; type: dfn
	text: absolute length
	text: dimension
</pre>

<h2 id='introduction'>Introduction</h2>

The web's traditional position calculation mechanisms
rely on explicit queries of DOM state
that are known to cause (expensive) style recalculation and layout
and, frequently, are a source of significant performance overhead
due to continuous polling for this information.

A body of common practice has evolved that relies on these behaviors,
however, including (but not limited to):

* Building custom pre- and deferred-loading of DOM and data.
* Implementing data-bound high-performance scrolling lists
	which load and render subsets of data sets.
	These lists are a central mobile interaction idiom.
* Calculating element visibility.
	In particular,
	<a href="http://www.iab.net/iablog/2014/03/viewability-has-arrived-what-you-need-to-know-to-see-through-this-sea-change.html">
	ad networks now require reporting of ad "visibility" for monetizing impressions</a>. This has led to many sites abusing scroll handlers
	(causing jank on scroll),
	<a href="http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html">
	synchronous layout invoking readbacks</a>
	(causing unnecessary critical work in rAF loops),
	and resorting to exotic plugin-based solutions for computing "true" element visibility (with all the associated overhead of the plugin architecture).

These use-cases have several common properties:

1. They can be represented as passive "queries"
	about the state of individual elements
	with respect to some other element
	(or the global viewport).
2. They do not impose hard latency requirements;
	that is to say, the information can be delivered asynchronously
	(e.g. from another thread)
	without penalty.
3. They are poorly supported by nearly all combinations of existing web platform features,
	requiring extraordinary developer effort despite their widespread use.

A notable non-goal is pixel-accurate information about what was actually displayed
(which can be quite difficult to obtain efficiently in certain browser architectures
in the face of filters, webgl, and other features).
In all of these scenarios the information is useful
even when delivered at a slight delay
and without perfect compositing-result data.

The Intersection Observer API addresses the above issues
by giving developers a new method to asynchronously query the position of an element
with respect to other elements or the global viewport.
The asynchronous delivery eliminates the need for costly DOM and style queries,
continuous polling,
and use of custom plugins.
By removing the need for these methods
it allows applications to significantly reduce their CPU, GPU and energy costs.

<div class="example">
	<pre highlight="js">
	var observer = new IntersectionObserver(changes => {
		for (const change of changes) {
			console.log(change.time);               // Timestamp when the change occurred
			console.log(change.rootBounds);         // Unclipped area of root
			console.log(change.boundingClientRect); // target.boundingClientRect()
			console.log(change.intersectionRect);   // boundingClientRect, clipped by its containing block ancestors, and intersected with rootBounds
			console.log(change.intersectionRatio);  // Ratio of intersectionRect area to boundingClientRect area
			console.log(change.target);             // the Element target
		}
	}, {});

	// Watch for intersection events on a specific target Element.
	observer.observe(target);

	// Stop watching for intersection events on a specific target Element.
	observer.unobserve(target);

	// Stop observing threshold events on all target elements.
	observer.disconnect();
	</pre>
</div>

<h2 id='intersection-observer-api'>Intersection Observer</h2>

The <dfn>Intersection Observer</dfn> API enables developers to understand the
visibility and position of <dfn for="IntersectionObserver">target</dfn> DOM
elements relative to an <a>intersection root</a>.

<h3 id='intersection-observer-callback'>
The IntersectionObserverCallback</h3>

<pre class="idl">
	callback IntersectionObserverCallback = void (sequence&lt;IntersectionObserverEntry> entries, IntersectionObserver observer)
</pre>

This callback will be invoked when there are changes to <a>target</a>'s
intersection with the <a>intersection root</a>, as per the
<a>processing model</a>.

<h3 id='intersection-observer-interface'>
The IntersectionObserver interface</h3>

The {{IntersectionObserver}} interface can be used to observe changes in the
intersection of an <a>intersection root</a> and one or more <a>target</a> {{Element}}s.

An {{IntersectionObserver}} with a {{IntersectionObserver/root}} {{Element}} can
observe any <a>target</a> {{Element}} that is a descendant of the
{{IntersectionObserver/root}} in the <a>containing block chain</a>.

An {{IntersectionObserver}} with no {{IntersectionObserver/root}} {{Element}}
will automatically observe intersections with the <a>implicit root</a>,
and valid <a>targets</a> include any {{Element}} in the
<a>top-level browsing context</a>, as well as any {{Element}} in any
<a>nested browsing contexts</a> inside the <a>top-level browsing context</a>.

Note: In {{MutationObserver}}, the {{MutationObserverInit}} options are passed
to {{MutationObserver/observe()}} while in {{IntersectionObserver}} they are
passed to the constructor. This is because for MutationObserver, each {{Node}}
being observed could have a different set of attributes to filter for. For
{{IntersectionObserver}}, developers may choose to use a single observer to
track multiple targets using the same set of options; or they may use a different
observer for each tracked target.

{{IntersectionObserverInit/rootMargin}} or {{threshold}} values for each
<a>target</a> seems to introduce more complexity without solving additional
use-cases. Per-{{observe()}} options could be provided in the future if V2
introduces a need for it.

<pre class="idl">
[Constructor(IntersectionObserverCallback callback, optional IntersectionObserverInit options),
 Exposed=Window]
interface IntersectionObserver {
	readonly attribute Element? root;
	readonly attribute DOMString rootMargin;
	readonly attribute sequence&lt;double> thresholds;
	void observe(Element target);
	void unobserve(Element target);
	void disconnect();
	sequence&lt;IntersectionObserverEntry> takeRecords();
};
</pre>

<div dfn-type="method" dfn-for="IntersectionObserver">
	: <dfn constructor lt="IntersectionObserver(callback, options)">
		new IntersectionObserver(callback, options)</dfn>
	::
		1. Let |this| be a new {{IntersectionObserver}} object
		2. Set |this|'s internal {{[[callback]]}} slot to |callback|.
		3. Set |this|.|root| to |options|.|root|.
		4. Attempt to <a>parse a root margin</a>
			from |options|.|rootMargin|.
			If a list is returned,
			set |this|'s internal {{[[rootMargin]]}} slot to that.
			Otherwise, <a>throw</a> a {{SyntaxError}} exception.
		5. Let |thresholds| be a list equal to
			|options|.|threshold|.
		6. If any value in |thresholds| is less than 0.0 or greater than
			1.0, <a>throw</a> a {{RangeError}} exception.
		7. Sort |thresholds| in ascending order.
		8. If |thresholds| is empty, append <code>0</code> to |thresholds|.
		9. Set |this|.|thresholds| to |thresholds|.
		10. Return |this|.
	: <dfn>observe(target)</dfn>
	::
		1. If |target| is in |this|'s internal {{[[ObservationTargets]]}} slot,
			return.
		2. Let |intersectionObserverRegistration| be
			an {{IntersectionObserverRegistration}} record
			with an {{IntersectionObserverRegistration/observer}} property set to |this|,
			a {{IntersectionObserverRegistration/previousThresholdIndex}} property set to <code>-1</code>,
			and a {{IntersectionObserverRegistration/previousIsIntersecting}} property set to <code>false</code>.
		3. Append |intersectionObserverRegistration|
			to |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot.
		4. Add |target| to |this|'s internal {{[[ObservationTargets]]}} slot.
		5. Schedule an iteration of the <a>event loop</a>
			in the {{IntersectionObserver/root}}'s <a>browsing context</a>.
	: <dfn>unobserve(target)</dfn>
	::
		1. Remove the {{IntersectionObserverRegistration}} record
			whose {{IntersectionObserverRegistration/observer}} property is equal to |this|
			from |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot.
		2. Remove |target| from |this|'s internal {{[[ObservationTargets]]}} slot.

		Note: {{MutationObserver}} does not implement {{unobserve()}}.
		For {{IntersectionObserver}}, {{unobserve()}} addresses the
		lazy-loading use case. After |target| becomes visible,
		it does not need to be tracked.
		It would be more work to either {{disconnect()}} all |target|s
		and {{observe()}} the remaining ones,
		or create a separate {{IntersectionObserver}} for each |target|.
	: <dfn>disconnect()</dfn>
	::
		For each |target| in |this|'s internal {{[[ObservationTargets]]}} slot:

		1. Remove the {{IntersectionObserverRegistration}} record
			whose {{IntersectionObserverRegistration/observer}} property is equal to |this|
			from |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot.
		2. Remove |target| from |this|'s internal {{[[ObservationTargets]]}} slot.
	: <dfn>takeRecords()</dfn>
	::
			1. Let |queue| be a copy of |this|'s internal {{[[QueuedEntries]]}} slot.
			2. Clear |this|'s internal {{[[QueuedEntries]]}} slot.
			3. Return |queue|.
</div>

<div dfn-type="attribute" dfn-for="IntersectionObserver">
	: <dfn>root</dfn>
	::
		The root {{Element}} to use for intersection, or <code>null</code> if the
		observer uses the <a>implicit root</a>.
	: <dfn>rootMargin</dfn>
	::
		Offsets applied to the <a>intersection root's</a> bounding box,
		effectively growing or shrinking the box that is used to calculate intersections.
		Note that {{IntersectionObserver/rootMargin}} is only applied
		for <a>targets</a> which belong to the same <a>unit of related similar-origin browsing contexts</a>
		as the <a>intersection root</a>.

		On getting, return the result of serializing the elements of {{[[rootMargin]]}}
		space-separated, where pixel lengths serialize as the numeric value followed by "px",
		and percentages serialize as the numeric value followed by "%".  Note that
		this is not guaranteed to be identical to the |options|.{{IntersectionObserverInit/rootMargin}}
		passed to the {{IntersectionObserver}} constructor.  If no
		{{IntersectionObserverInit/rootMargin}} was passed to the {{IntersectionObserver}}
		constructor, the value of this attribute is "0px 0px 0px 0px".
	: <dfn>thresholds</dfn>
	::
		A list of thresholds, sorted in increasing numeric order,
		where each threshold is a ratio of intersection area to bounding box area
		of an observed target.  Notifications for a target are generated when any
		of the thresholds are crossed for that target.
		If no |options|.{{IntersectionObserverInit/threshold}} was provided to the
		{{IntersectionObserver}} constructor, the value of this attribute will be [0].
</div>

The <dfn for="IntersectionObserver">intersection root</dfn>
for an {{IntersectionObserver}} is the value of its {{IntersectionObserver/root}} attribute,
or else the <a>top-level browsing context</a>'s <a>document</a> node
(referred to as the <dfn for="IntersectionObserver">implicit root</dfn>) if
the {{IntersectionObserver/root}} attribute is <code>null</code>.

The <dfn for=IntersectionObserver>root intersection rectangle</dfn>
for an {{IntersectionObserver}}
is the rectangle we'll use to check against the targets.

<dl class=switch>
	<dt>If the <a>intersection root</a> is the <a>implicit root</a>,
	<dd>it's the viewport's size.

	<dt>If the <a>intersection root</a> has an overflow clip,
	<dd>it's the element's <a>content area</a>.

	<dt>Otherwise,
	<dd>it's the result of running the {{Element/getBoundingClientRect()}} algorithm on the <a>intersection root</a>.
</dl>

For any <a>target</a> which belongs to the same <a>unit of related similar-origin browsing contexts</a>
as the <a>intersection root</a>,
the rectangle is then expanded
according to the offsets in the {{IntersectionObserver}}’s {{[[rootMargin]]}} slot
in a manner similar to CSS's 'margin' property,
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
with positive lengths indicating an outward offset.
Percentages are resolved relative to the width of the undilated rectangle.

Note: {{IntersectionObserver/rootMargin}} only applies to the <a>intersection root</a> itself.
If a <a>target</a> {{Element}} is clipped by an ancestor other than the
<a>intersection root</a>, that clipping is unaffected by
{{IntersectionObserver/rootMargin}}.

Note: <a>Root intersection rectangle</a> is not affected by
<a>pinch zoom</a> and will report the unadjusted <a>viewport</a>, consistent with the
intent of pinch zooming (to act like a magnifying glass and NOT change layout.)

To <dfn>parse a root margin</dfn>
from an input string |marginString|,
returning either a list of 4 pixel lengths or percentages,
or failure:

1. <a>Parse a list of component values</a> |marginString|,
	storing the result as |tokens|.
2. Remove all whitespace tokens from |tokens|.
3. If the length of |tokens| is 0 or greater than 4,
	return failure.
4. Replace each |token| in |tokens|:
	* If |token| is an <a>absolute length</a> <a>dimension</a> token,
		replace it with a an equivalent pixel length.
	* If |token| is a <<percentage>> token,
		replace it with an equivalent percentage.
	* Otherwise, return failure.
5. If there is one element in |tokens|,
	append three duplicates of that element to |tokens|.
	If there is two elements are |tokens|,
	append a duplicate of each element to |tokens|.
	If there are three elements in |tokens|,
	append a duplicate of the second element to |tokens|.
6. Return |tokens|.

<h3 id="intersection-observer-entry">
The IntersectionObserverEntry interface</h3>

<pre class="idl">
[Constructor(IntersectionObserverEntryInit intersectionObserverEntryInit)]
interface IntersectionObserverEntry {
	readonly attribute DOMHighResTimeStamp time;
	readonly attribute DOMRectReadOnly rootBounds;
	readonly attribute DOMRectReadOnly boundingClientRect;
	readonly attribute DOMRectReadOnly intersectionRect;
	readonly attribute boolean isIntersecting;
	readonly attribute double intersectionRatio;
	readonly attribute Element target;
};

dictionary IntersectionObserverEntryInit {
	required DOMHighResTimeStamp time;
	required DOMRectInit rootBounds;
	required DOMRectInit boundingClientRect;
	required DOMRectInit intersectionRect;
	required boolean isIntersecting;
	required double intersectionRatio;
	required Element target;
};
</pre>

<div dfn-type="attribute" dfn-for="IntersectionObserverEntry">
	: <dfn>boundingClientRect</dfn>
	::
		A {{DOMRectReadOnly}} obtained by running the {{Element/getBoundingClientRect()}} algorithm
		on the {{IntersectionObserverEntry/target}}.
	: <dfn>intersectionRect</dfn>
	::
		{{IntersectionObserverEntry/boundingClientRect}}, intersected by
		each of {{IntersectionObserverEntry/target}}'s ancestors' clip
		rects (up to but not including {{IntersectionObserver/root}}),
		intersected with the <a>root intersection rectangle</a>.
		This value represents the portion of
		{{IntersectionObserverEntry/target}} actually visible
		within the <a>root intersection rectangle</a>.
	: <dfn>isIntersecting</dfn>
	::
		True if the {{IntersectionObserverEntry/target}} intersects with the
		{{IntersectionObserver/root}}; false otherwise.  This flag makes it
		possible to distinguish between an {{IntersectionObserverEntry}} signalling
		the transition from intersecting to not-intersecting; and an
		{{IntersectionObserverEntry}} signalling a transition from not-intersecting
		to intersecting with a zero-area intersection rect (as will happen with
		edge-adjacent intersections, or when the {{IntersectionObserverEntry/boundingClientRect}}
		has zero area).
	: <dfn>intersectionRatio</dfn>
	::
		If the {{IntersectionObserverEntry/boundingClientRect}} has non-zero area,
		this will be the ratio of {{IntersectionObserverEntry/intersectionRect}} area to
		{{IntersectionObserverEntry/boundingClientRect}} area.  Otherwise, this will be
		1 if the {{IntersectionObserverEntry/isIntersecting}} is true, and 0 if not.
	: <dfn>rootBounds</dfn>
	::
		If {{IntersectionObserverEntry/target}} belongs to the same
		<a>unit of related similar-origin browsing contexts</a>
		as the <a>intersection root</a>,
		this will be the <a>root intersection rectangle</a>.
		Otherwise, this will be <code>null</code>.
		Note that if the target is in a different <a>browsing context</a> than the <a>intersection root</a>,
		this will be in a different coordinate system
		than {{IntersectionObserverEntry/boundingClientRect}} and {{IntersectionObserverEntry/intersectionRect}}.
	: <dfn>target</dfn>
	::
		The {{Element}} whose intersection with the
		<a>intersection root</a> changed.
	: <dfn>time</dfn>
	::
		The attribute must return a {{DOMHighResTimeStamp}}
		that corresponds to the time the intersection was recorded, relative to the
		<a>time origin</a> of the global object associated with the IntersectionObserver instance
		that generated the notification.
</div>

<h3 id="intersection-observer-init">
The IntersectionObserverInit dictionary</h3>

<pre class="idl">
dictionary IntersectionObserverInit {
	Element?  root = null;
	DOMString rootMargin = "0px";
	(double or sequence&lt;double>) threshold = 0;
};
</pre>

<div dfn-type="dict-member" dfn-for="IntersectionObserverInit">
	: <dfn>root</dfn>
	::
		The |root| to use for intersection.
		If not provided, use the <a>implicit root</a>.
	: <dfn>rootMargin</dfn>
	::
		Similar to the CSS 'margin' property,
		this is a string of 1-4 components,
		each either an <a>absolute length</a> or a percentage.

		<pre class="example" highlight=js>
			"5px"                // all margins set to 5px
			"5px 10px"           // top & bottom = 5px, right & left = 10px
			"-10px 5px 8px"      // top = -10px, right & left = 5px, bottom = 8px
			"-10px -5px 5px 8px" // top = -10px, right = -5px, bottom = 5px, left = 8px
		</pre>
	: <dfn>threshold</dfn>
	::
		List of threshold(s) at which to trigger callback.
		callback will be invoked when intersectionRect's area changes from
		greater than or equal to any threshold to less than that threshold,
		and vice versa.

		Threshold values must be in the range of [0, 1.0] and represent a
		percentage of the area of the rectangle produced
		by running the {{Element/getBoundingClientRect()}} algorithm
		on the <a>target</a>.

		Note: 0.0 is effectively "any non-zero number of pixels".
</div>

<h2 dfn id='intersection-observer-processing-model'>
Processing Model</h2>

This section outlines the steps the user agent must take when implementing
the <a>Intersection Observer</a> API.

<h3 id='defines'>
Internal Slot Definitions</h3>

<h4 id='document-defines'>
Document</h4>

Each <a>Document</a> has an
<dfn for="Document">IntersectionObserverTaskQueued</dfn> flag
which is initialized to false.

<h4 id='element-private-slots'>
Element</h4>

{{Element}} objects have an internal
<dfn attribute for=Element>\[[RegisteredIntersectionObservers]]</dfn> slot,
which is initialized to an empty list.
This list holds <dfn interface>IntersectionObserverRegistration</dfn> records,
which have an <dfn attribute for=IntersectionObserverRegistration>observer</dfn> property
holding an {{IntersectionObserver}}, a <dfn attribute for=IntersectionObserverRegistration>previousThresholdIndex</dfn> property
holding a number between -1 and the length of the observer's {{IntersectionObserver/thresholds}} property (inclusive), and
a <dfn attribute for=IntersectionObserverRegistration>previousIsIntersecting</dfn> property holding a boolean.

<h4 id='intersection-observer-private-slots'>
IntersectionObserver</h4>

{{IntersectionObserver}} objects have internal
<dfn attribute for=IntersectionObserver>\[[QueuedEntries]]</dfn> and
<dfn attribute for=IntersectionObserver>\[[ObservationTargets]]</dfn> slots,
which are initialized to empty lists and an internal
<dfn attribute for=IntersectionObserver>\[[callback]]</dfn> slot
which is initialized by {{IntersectionObserver(callback, options)}}</a>.
They also have an internal <dfn attribute for=IntersectionObserver>\[[rootMargin]]</dfn> slot
which is a list of four pixel lengths or percentages.

<h3 id='algorithms'>
Algorithms</h2>

<h4 id='queue-intersection-observer-task'>
Queue an Intersection Observer Task</h4>

To <dfn>queue an intersection observer task</dfn> for a <a>Document</a> |document|,
run these steps:

1. If |document|'s <a>IntersectionObserverTaskQueued</a> flag is set to true,
	return.
2. Set |document|'s <a>IntersectionObserverTaskQueued</a> flag to true.
3. <a>Queue a task</a> to the <a>document</a>'s <a>event loop</a> to <a>notify intersection observers</a>.

<h4 id='notify-intersection-observers-algo'>
Notify Intersection Observers</h4>

To <dfn>notify intersection observers</dfn> for a <a>Document</a> |document|,
run these steps:

1. Set |document|'s <a>IntersectionObserverTaskQueued</a> flag to false.
2. Let |notify list| be a list of all {{IntersectionObserver}}s
	whose {{IntersectionObserver/root}} is in the DOM tree of |document|.
3. For each {{IntersectionObserver}} object |observer| in |notify list|,
	run these steps:

	1. If |observer|'s internal {{[[QueuedEntries]]}} slot is empty,
		continue.
	2. Let |queue| be a copy of |observer|'s internal {{[[QueuedEntries]]}}
		slot.
	3. Clear |observer|'s internal {{[[QueuedEntries]]}} slot.
	4. Invoke |callback| with |queue| as the first argument and |observer|
		as the second argument and <a>callback this value</a>.
		If this throws an exception, <a>report the exception</a>.

<h4 id='queue-intersection-observer-entry-algo'>
Queue an IntersectionObserverEntry</h4>

To <dfn>queue an IntersectionObserverEntry</dfn> for an {{IntersectionObserver}} |observer|, given a
<a>Document</a> |document|; {{DOMHighResTimeStamp}} |time|;
{{DOMRect}}s |rootBounds|, |boundingClientRect|, |intersectionRect|, and |isIntersecting| flag;
and an {{Element}} |target|;
run these steps:

1. Construct an {{IntersectionObserverEntry}}, passing in |time|, |rootBounds|,
	|boundingClientRect|, |intersectionRect|, |isIntersecting|, and |target|.
2. Append it to |observer|'s internal {{[[QueuedEntries]]}} slot.
3. <a>Queue an intersection observer task</a> for |document|.

<h4 id='calculate-intersection-rect-algo'>
Compute the Intersection of a Target Element and the Root</h4>

To <dfn>compute the intersection</dfn> between a <a>target</a> and the observer's <a>intersection root</a>,
run these steps:

1. Let |intersectionRect| be the result of running the {{Element/getBoundingClientRect()}} algorithm on the <a>target</a>.
2. Let |container| be the <a>containing block</a> of the <a>target</a>.
3. While |container| is not the <a>intersection root</a>:
	1. Map |intersectionRect| to the coordinate space of |container|.
	2. If |container| has overflow clipping or a css <a>clip-path</a> property,
		update |intersectionRect| by applying |container|'s clip.
	3. If |container| is the root element of a <a>nested browsing context</a>,
		update |container| to be the <a>browsing context container</a> of |container|,
		and update |intersectionRect| by clipping to the <a>viewport</a> of the
		<a>nested browsing context</a>.
		Otherwise, update |container| to be the <a>containing block</a> of |container|.
4. Map |intersectionRect| to the coordinate space of the <a>intersection root</a>.
5. Update |intersectionRect| by intersecting it with the <a>root intersection rectangle</a>.
6. Map |intersectionRect| to the coordinate space of the viewport of the <a>Document</a> containing the <a>target</a>.

<h4 id='update-intersection-observations-algo'>
Run the Update Intersection Observations Steps</h4>

To <dfn>run the update intersection observations steps</dfn> for a
<a>Document</a> |document| given a timestamp |time|, run these steps:

1. Let |observer list| be a list of all {{IntersectionObserver}}s
	whose {{IntersectionObserver/root}} is in the DOM tree of |document|.
2. For each |observer| in |observer list|:
	1. Let |rootBounds| be |observer|'s <a>root intersection rectangle</a>.
	2. For each |target| in |observer|'s internal {{[[ObservationTargets]]}} slot, processed in the same order that {{observe()}} was called on each |target|:
		1. If the <a>intersection root</a> is not the <a>implicit root</a>
			and |target| is not a descendant of the <a>intersection root</a>
			in the <a>containing block chain</a>,
			skip further processing for |target|.
		2. If the <a>intersection root</a> is not the <a>implicit root</a>,
			and |target| is not in the same <a>Document</a> as the <a>intersection root</a>,
			skip further processing for |target|.
		3. Let |targetRect| be a {{DOMRectReadOnly}} obtained
			by running the {{Element/getBoundingClientRect()}} algorithm on |target|.
		4. Let |intersectionRect| be the result of running the <a>compute the intersection</a>
			algorithm on |target|.
		5. Let |targetArea| be |targetRect|'s area.
		6. Let |intersectionArea| be |intersectionRect|'s area.
		7. Let |isIntersecting| be true if |targetRect| and |rootBounds| intersect or are edge-adjacent,
			even if the intersection has zero area (because |rootBounds| or |targetRect| have
			zero area); otherwise, let |isIntersecting| be false.
		8. If |targetArea| is non-zero, let |intersectionRatio| be |intersectionArea| divided by |targetArea|.<br>
			Otherwise, let |intersectionRatio| be <code>1</code> if |isIntersecting| is true, or <code>0</code> if |isIntersecting| is false.
		9. Let |thresholdIndex| be the index of the first entry in |observer|.{{thresholds}} whose value is greater than |intersectionRatio|, or the length of |observer|.{{thresholds}} if |intersectionRatio| is greater than or equal to the last entry in |observer|.{{thresholds}}.
		10. Let |intersectionObserverRegistration| be the {{IntersectionObserverRegistration}} record 
			in |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot
			whose {{IntersectionObserverRegistration/observer}} property is equal to |observer|.
		11. Let |previousThresholdIndex| be the |intersectionObserverRegistration|'s
		    {{IntersectionObserverRegistration/previousThresholdIndex}} property.
		12. Let |previousIsIntersecting| be the |intersectionObserverRegistration|'s
		    {{IntersectionObserverRegistration/previousIsIntersecting}} property.
		13. If |thresholdIndex| does not equal |previousThresholdIndex| or if 
		    |isIntersecting| does not equal |previousIsIntersecting|,
			<a>queue an IntersectionObserverEntry</a>,
			passing in |observer|, |time|, |rootBounds|,
			|boundingClientRect|, |intersectionRect|, |isIntersecting|, and |target|.
		14. Assign |threshold| to |intersectionObserverRegistration|'s
		    {{IntersectionObserverRegistration/previousThresholdIndex}} property.
        15. Assign |isIntersecting| to |intersectionObserverRegistration|'s
		    {{IntersectionObserverRegistration/previousIsIntersecting}} property.

<h3 id='lifetime'>
IntersectionObserver Lifetime</h2>

An {{IntersectionObserver}} will remain alive until both of these conditions hold:
<ul>
	<li>There are no scripting references to the observer.</li>
	<li>The observer is not observing any targets.
</ul>

An {{IntersectionObserver}} will continue observing a target until any of the following occurs:
<ul>
	<li>{{IntersectionObserver/unobserve(target)}} is called on the target.</li>
	<li>{{IntersectionObserver/disconnect()}} is called.</li>
	<li>The target {{Element}} is deleted.</li>
	<li>The observer's <a>intersection root</a> is deleted.
</ul>

<h3 id='external-spec-integrations'>
External Spec Integrations</h3>

<h4 id='event-loop'>
HTML Processing Model: Event Loop</h4>

An <a>Intersection Observer</a> processing step should take place
during the "<i>Update the rendering</i>" steps,
after step 9, <a>run the fullscreen rendering steps</a>,
and before step 10, <a>run the animation frame callbacks</a>,
in the in the <a>HTML Processing Model</a>.

This step is:

<ol start="10">
	<li>For each <a>fully active</a> <a>Document</a> in |docs|, <a>Run the update intersection observations steps</a> for each {{IntersectionObserver}} whose {{IntersectionObserver/root}} is in the DOMtree of that <a>Document</a>.</li>
</ol>

<!-- ============================================================ -->
<h2 id=acknowledgements>Acknowledgements</h2>
<!-- ============================================================ -->

Special thanks to <a href="https://github.com/w3c/IntersectionObserver/graphs/contributors">all the contributors</a> for their technical input and suggestions that led to improvements to this
specification.