Skip to content

Run snapshot post-layout state steps in resizeObserver loop #11613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lilles wants to merge 2 commits into
base: main
Choose a base branch
from
+7 −25
Open

Run snapshot post-layout state steps in resizeObserver loop #11613

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
157ef6f
Run snapshot post-layout state steps in resizeObserver loop
lilles Oct 23, 2024
105065d
Snapshot for each iteration and remove content-visibility steps
lilles Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 7 additions & 25 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4063,6 +4063,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes">evaluate media queries and report changes</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#scroll-a-target-into-view">Scroll a target into view</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#scroll-to-the-beginning-of-the-document">Scroll to the beginning of the document</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/cssom-view/#run-snapshot-post-layout-state-steps">run snapshot post-layout state steps</dfn></li>
<li>The <dfn data-x="event-resize" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-window-resize"><code>resize</code></dfn> event</li>
<li>The <dfn data-x="event-scroll" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scroll"><code>scroll</code></dfn> event</li>
<li>The <dfn data-x="event-scrollend" data-x-href="https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend"><code>scrollend</code></dfn> event</li>
Expand Down Expand Up @@ -114572,44 +114573,25 @@ import "https://example.com/foo/../module2.mjs";</code></pre>

<ol>
<li><p>Let <var>resizeObserverDepth</var> be 0.</p></li>
<li><p>Let <var>didRunSnapshotPostLayoutStateSteps</var> be false.</p></li>

<li>
<p>While true:</p>

<ol>
<li><p>Recalculate styles and update layout for <var>doc</var>.</p></li>

<li><p>Let <var>hadInitialVisibleContentVisibilityDetermination</var> be false.</p></li>

<li>
<p>For each element <var>element</var> with <span
data-x="content-visibility-auto">'auto'</span> used value of
<span>'content-visibility'</span>:</p>

<li><p>If <var>didRunSnapshotPostLayoutStateSteps</var> is false:</p>
<ol>
<li><p>Let <var>checkForInitialDetermination</var> be true if <var>element</var>'s
<span>proximity to the viewport</span> is not determined and it is not <span>relevant to
the user</span>. Otherwise, let <var>checkForInitialDetermination</var> be
false.</p></li>
<li><p><span>Run snapshot post-layout state steps</span> for <var>doc</var>. <ref>CSSOMVIEW</ref></p></li>

<li><p>Determine <span>proximity to the viewport</span> for <var>element</var>.</p></li>
<li><p>Set <var>didRunSnapshotPostLayoutStateSteps</var> to true</p></li>

<li><p>If <var>checkForInitialDetermination</var> is true and <var>element</var> is now
<span>relevant to the user</span>, then set
<var>hadInitialVisibleContentVisibilityDetermination</var> to true.</p></li>
<li><p>If any snapshotted state changed, then <span>continue</span>.</p></li>
</ol>
</li>

<li>
<p>If <var>hadInitialVisibleContentVisibilityDetermination</var> is true, then
<span>continue</span>.</p>

<p class="note">The intent of this step is for the initial viewport proximity
determination, which takes effect immediately, to be reflected in the style and layout
calculation which is carried out in a previous step of this loop. Proximity
determinations other than the initial one take effect at the next <span>rendering
opportunity</span>. <ref>CSSCONTAIN</ref></p>
</li>
<li><p>Set <var>didRunSnapshotPostLayoutStateSteps</var> to false.</p></li>

<li><p><span>Gather active resize observations at depth</span>
<var>resizeObserverDepth</var> for <var>doc</var>.</p></li>
Expand Down