8000 [css-contain-2] Define proximity to the viewport (#8904) · w3c/csswg-drafts@e7734da · GitHub
Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit e7734da

Browse files
authored
[css-contain-2] Define proximity to the viewport (#8904)
1 parent 92628fe commit e7734da

File tree

1 file changed

+49
-25
lines changed

1 file changed

+49
-25
lines changed

css-contain-2/Overview.bs

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1628,21 +1628,14 @@ Suppressing An Element's Contents Entirely: the 'content-visibility' property {#
16281628
</div>
16291629
</div>
16301630

1631-
<div algorithm>
1632-
An element is <dfn export>relevant to the user</dfn>
1633-
if <strong>any</strong> of the following conditions are true:
1631+
<div>
1632+
An element that has ''content-visibility: auto'' is in one of three states
1633+
when it comes to its <dfn export>proximity to the viewport</dfn>:
16341634

1635-
* The element is "on-screen":
1636-
its [=paint containment box=]'s [=overflow clip edge=]
1637-
intersects with the viewport,
1638-
or a user-agent defined margin around the viewport.
1639-
1640-
<wpt>
1641-
content-visibility/content-visibility-046.html
1642-
content-visibility/content-visibility-079.html
1643-
content-visibility/content-visibility-auto-in-iframe.html
1644-
content-visibility/content-visibility-auto-intrinsic-width.html
1645-
</wpt>
1635+
* The element is <dfn>close to the viewport</dfn>:
1636+
In this state, the element is considered "on-screen":
1637+
its [=paint containment box=]'s [=overflow clip edge=] intersects with the viewport,
1638+
or a user-agent defined margin around the viewport.
16461639

16471640
Note: This margin is meant to allow the user agent
16481641
to begin preparing for an element to be in the viewport soon.
@@ -1654,6 +1647,32 @@ Suppressing An Element's Contents Entirely: the 'content-visibility' property {#
16541647
(or within the user-agent defined margin around the viewport),
16551648
even if the element itself is still off-screen.
16561649

1650+
1651+
* The element is <dfn>far away from the viewport</dfn>:
1652+
In this state, the element's proximity to the viewport has been computed and is not [=close to the viewport=].
1653+
1654+
* The element's [=proximity to the viewport=] is <dfn>not determined</dfn>:
1655+
In this state, the computation to determine the element's [=proximity to the viewport=] has not been done
1656+
since the last time the element was connected.
1657+
1658+
Initially, the element's [=proximity to the viewport=] is [=not determined=].
1659+
Only connected elements with ''content-visibility: auto'' determine their [=proximity to the viewport=].
1660+
When the element becomes disconnected, the element's [=proximity to the viewport=] becomes [=not determined=].
1661+
</div>
1662+
1663+
<div algorithm>
1664+
An element is <dfn export>relevant to the user</dfn>
1665+
if <strong>any</strong> of the following conditions are true:
1666+
1667+
* The element is [=close to the viewport=].
1668+
1669+
<wpt>
1670+
content-visibility/content-visibility-046.html
1671+
content-visibility/content-visibility-079.html
1672+
content-visibility/content-visibility-auto-in-iframe.html
1673+
content-visibility/content-visibility-auto-intrinsic-width.html
1674+
</wpt>
1675+
16571676
* Either the element or its [=contents=]
16581677
are focused,
16591678
as described in the <a href="https://html.spec.whatwg.org/multipage/interaction.html#focus">focus</a> section of the HTML spec.
@@ -1879,11 +1898,11 @@ This event is dispatched by posting a task at the time when the state change occ
18791898
<pre class='idl'>
18801899
[Exposed=Window]
18811900
interface ContentVisibilityAutoStateChangeEvent : Event {
1882-
constructor(DOMString type, optional ContentVisibilityAutoStateChangeEventInit eventInitDict = {});
1883-
readonly attribute boolean skipped;
1901+
constructor(DOMString type, optional ContentVisibilityAutoStateChangeEventInit eventInitDict = {});
1902+
readonly attribute boolean skipped;
18841903
};
18851904
dictionary ContentVisibilityAutoStateChangeEventInit : EventInit {
1886-
boolean skipped = false;
1905+
boolean skipped = false;
18871906
};
18881907
</pre>
18891908

@@ -1924,8 +1943,8 @@ Restrictions and Clarifications {#cv-notes}
19241943
1. From the perspective of an {{IntersectionObserver}},
19251944
the [=skipped contents=] of an element
19261945
are never intersecting the [=intersection root=].
1927-
This is true even if both the root and the target elements
1928-
are in the [=skipped contents=].
1946+
This is true even if both the root and the target elements
1947+
are in the [=skipped contents=].
19291948

19301949
<wpt>
19311950
content-visibility/content-visibility-030.html
@@ -1948,15 +1967,15 @@ Restrictions and Clarifications {#cv-notes}
19481967
of the frame that renders the effects of the change
19491968
have run.
19501969
Specifically, such changes will take effect between steps 13 and 14
1951-
of <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">Update the Rendering</a> step of the Processing Model
1970+
of [=update the rendering=] step of the Processing Model
19521971
(between “run the animation frame callbacks”
1953-
and “run the update intersection observations steps”).
1972+
and “run the update intersection observations steps”).
19541973

19551974
<div class=note>
19561975
Determining the viewport intersection of the element
19571976
can be done with an internal version of an IntersectionObserver.
19581977
However, since the observations from this are dispatched at
1959-
step 14 of Update the Rendering,
1978+
step 14 of [=update the rendering=],
19601979
any changes to the [=skipped contents|skipped=] (and thus painted) state
19611980
will not be visible to the user until the next frame's processing.
19621981
For this reason, updating the [=skipped contents|skipped=] state,
@@ -1970,9 +1989,13 @@ Restrictions and Clarifications {#cv-notes}
19701989
and not cause any forced layouts.
19711990
</div>
19721991

1973-
4. The initial determination of visibility for ''content-visibility: auto'' must
1974-
happen in the same frame that determined an existence of a new
1975-
''content-visibility: auto'' element.
1992+
4. Elements with ''content-visibility: auto''
1993+
that have not determined [=proximity to the viewport=]
1994+
must determine their proximity to the viewport
1995+
in the next [=update the rendering=] cycle.
1996+
The effect of this determination must be reflected in the visual update which results from this [=update the rendering=] cycle.
1997+
19 2ACE 98+
ISSUE: Reference the HTML spec algorithm here, when it's available.
19761999

19772000
<div class=note>
19782001
When an element first gains ''content-visibility: auto'', it may or may not
@@ -2280,6 +2303,7 @@ This appendix is <em>informative</em>.
22802303
Changes from <a href="https://www.w3.org/TR/2022/WD-css-contain-2-20220917/">2022-09-17 Working Draft</a>
22812304
</h3>
22822305

2306+
* defined [=proximity to the viewport=] and used it in the [[#cv-notes]], clarification 4.
22832307
* 'content-visibility' applies to the same properties as [=size containment=] rather than [=layout containment=]
22842308
* clarified that 'content-visibility' affects the used value, not computed value, of the 'contain' property
22852309
* Updated the ContentVisibilityAutoStateChanged event name to ContentVisibilityAutoStateChange to follow the convention for event names.

0 commit comments

Comments
 (0)