Skip to content

[css-scroll-snap] [cssom-view] Use a single scroll queue for all events #12606

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-scroll-snap] [cssom-view] Use a single scroll queue for all events #12606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
63 changes: 12 additions & 51 deletions css-scroll-snap-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,9 +345,6 @@ Snap Targets</h4>
scrolling operation also results in a {{scrollsnapchange}} event being fired, the
{{scrollsnapchange}} event should be fired before the {{scrollend}} event.

Each {{Document}} has an associated list of
<dfn export for=Document>pending scrollsnapchange event targets</dfn>, initially empty.

Each
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
one <dfn export>scrollsnapchangeTargetBlock</dfn> and one
Expand Down Expand Up @@ -378,32 +375,17 @@ Snap Targets</h4>
<var>inlineScrollSnapchangingTarget</var>.
1. Set <var>snap targets changed</var> to true.
1. If <var>snap targets changed</var> is true:
1. If |snapcontainer| is not already in <var>doc</var>'s
<a>pending scrollsnapchange event targets</a>:
1. Append |snapcontainer| to <var>doc</var>'s
<a>pending scrollsnapchange event targets</a>.
1. If (|snapcontainer|, <code>"scrollsnapchange"</code>) is not already in <var>doc</var>'s
<a>pending scroll events</a>:
1. Append (|snapcontainer|, <code>"scrollsnapchange"</code>) to <var>doc</var>'s
<a>pending scroll events</a>.

Note: When snapping occurs on a scroller (either due to a layout change or a
scrolling operation) the <a>scrollsnapchanging block-axis target</a> and <a>scrollsnapchanging inline-axis target</a>
associated with that scroller are updated and represent the current snap targets
of that scroller. This allows the <a>update scrollsnapchange targets</a> algorithm
to use these [=snap targets=] to determine whether a {{scrollsnapchange}} event should be fired.

When asked to <dfn export for=Document>dispatch pending scrollsnapchange events</dfn> for a {{Document}},
<var>doc</var>, run these steps:
1. For each item <var>target</var> in |doc|'s <a>pending scrollsnapchange event targets</a>:
1. Let |blockTarget| and |inlineTarget| be null initially.
1. If the <a>scrollsnapchangeTargetBlock</a> associated with <var>target</var> is a pseudo-element,
set |blockTarget| to the owning element of that <a>scrollsnapchangeTargetBlock</a>.
1. Otherwise, set |blockTarget| to that <a>scrollsnapchangeTargetBlock</a>.
1. If the <a>scrollsnapchangeTargetInline</a> associated with <var>target</var> is a pseudo-element,
set |inlineTarget| to the owning element of that <a>scrollsnapchangeTargetInline</a>.
1. Otherwise, Set |inlineTarget| to that <a>scrollsnapchangeTargetInline</a>.
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchange}} at <var>target</var>
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
{{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget| respectively.
1. Empty <var>doc</var>'s <a>pending scrollsnapchange event targets</a>.

<h4 id="scrollsnapchanging"> scrollsnapchanging </h4>
{{scrollsnapchanging}} is dispatched:
* during a scrolling operation, if the [=snap targets=] to which a
Expand Down Expand Up @@ -437,12 +419,6 @@ Snap Targets</h4>
will be possible for subsequent scrolling input to further alter the snap
container's scroll position and result in a different eventual snap target.


{{scrollsnapchanging}} events are fired before {{scroll!!event}} events.

Each {{Document}} has an associated list of
<dfn export for=Document>pending scrollsnapchanging event targets</dfn>, initially empty.

Each
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
one <dfn>scrollsnapchanging block-axis target</dfn>
Expand All @@ -463,32 +439,17 @@ Snap Targets</h4>
1. If <var>newBlockTarget</var> is not the same [=snap target=] as <var>blockTarget</var>:
1. Set the <a>scrollsnapchanging block-axis target</a> associated with |snapcontainer| to
<var>newBlockTarget</var>.
1. If |snapcontainer| is not already in <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>,
1. Append |snapcontainer| to <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>
1. If (|snapcontainer|, <code>"scrollsnapchanging"</code>) is not already in <var>doc</var>'s
<a>pending scroll events</a>,
1. Append (|snapcontainer|, <code>"scrollsnapchanging"</code>) to <var>doc</var>'s
<a>pending scroll events</a>
1. If <var>newInlineTarget</var> is not the same [=snap target=] as <var>inlineTarget</var>:
1. Set the <a>scrollsnapchanging inline-axis target</a> associated with |snapcontainer| to
<var>newInlineTarget</var>.
1. If |snapcontainer| is not already in <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>,
1. Append |snapcontainer| to <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>.

When asked to <dfn export for=Document>dispatch pending scrollsnapchanging events</dfn> for a {{Document}},
<var>doc</var>, run these steps:
1. For each item <var>target</var> in |doc|'s <a>pending scrollsnapchanging event targets</a>:
1. Let |blockTarget| and |inlineTarget| be null initially.
1. If the <a>scrollsnapchanging block-axis target</a> associated with <var>target</var> is a pseudo-element,
set |blockTarget| to the owning element of that <a>scrollsnapchanging block-axis target</a>.
1. Otherwise, set |blockTarget| to that <a>scrollsnapchanging block-axis target</a>.
1. If the <a>scrollsnapchanging inline-axis target</a> associated with <var>target</var> is a pseudo-element,
set |inlineTarget| to the owning element of that <a>scrollsnapchanging inline-axis target</a>.
1. Otherwise, set |inlineTarget| to that <a>scrollsnapchanging inline-axis target</a>.
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchanging}} at <var>target</var>
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
{{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget|, respectively.
1. Empty <var>doc</var>'s <a>pending scrollsnapchanging event targets</a>.
1. If (|snapcontainer|, <code>"scrollsnapchanging"</code>) is not already in <var>doc</var>'s
<a>pending scroll events</a>,
1. Append (|snapcontainer|, <code>"scrollsnapchanging"</code>) to <var>doc</var>'s
<a>pending scroll events</a>

<h4 id="snap-events-on-layout-changes">Snap Events due to Layout Changes </h4>
When a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
Expand Down
68 changes: 41 additions & 27 deletions cssom-view-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2002,9 +2002,7 @@ When asked to <dfn export for=Document>run the resize steps</dfn> for a {{Docume

This section integrates with the <a for=/>event loop</a> defined in HTML. [[!HTML]]

Each {{Document}} has an associated list of <dfn for=Document>pending scroll event targets</dfn>, initially empty.

Each {{Document}} has an associated list of <dfn for=Document>pending scrollend event targets</dfn>, initially empty.
Each {{Document}} has an associated list of <dfn for=Document>pending scroll events</dfn>, which stores pairs of ({{EventTarget}}, {{DOMString}}), initially empty.

Whenever a <a>viewport</a> gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:

Expand All @@ -2014,8 +2012,8 @@ Whenever a <a>viewport</a> gets scrolled (whether in response to user interactio
for <var>doc</var> with <var>doc</var>'s <a spec="css-scroll-snap-2">eventual snap target</a> in the block axis
as newBlockTarget and <var>doc</var>'s <a spec="css-scroll-snap-2">eventual snap target</a> in the inline axis
as newInlineTarget.
1. If <var>doc</var> is already in <var>doc</var>'s <a>pending scroll event targets</a>, abort these steps.
1. Append <var>doc</var> to <var>doc</var>'s <a>pending scroll event targets</a>.
1. If (<var>doc</var>, <code>"scroll"</code>) is already in <var>doc</var>'s <a>pending scroll events</a>, abort these steps.
1. Append (<var>doc</var>, <code>"scroll"</code>) to <var>doc</var>'s <a>pending scroll events</a>.

Whenever an element gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:

Expand All @@ -2025,29 +2023,18 @@ Whenever an element gets scrolled (whether in response to user interaction or by
for the element with the element's <a spec="css-scroll-snap-2">eventual snap target</a> in the block axis
as newBlockTarget and the element's <a spec="css-scroll-snap-2">eventual snap target</a> in the inline axis
as newInlineTarget.
1. If the element is already in <var>doc</var>'s <a>pending scroll event targets</a>, abort these steps.
1. Append the element to <var>doc</var>'s <a>pending scroll event targets</a>.
1. If the element is already in <var>doc</var>'s <a>pending scroll events</a>, abort these steps.
1. Append the element to <var>doc</var>'s <a>pending scroll events</a>.

Whenever a <a>visual viewport</a> gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:

1. Let <var>vv</var> be the {{VisualViewport}} object that was scrolled.
1. Let <var>doc</var> be <var>vv</var>'s <a for=visualviewport>associated document</a>.
1. If <var>vv</var> is already in <var>doc</var>'s <a>pending scroll event targets</a>, abort these steps.
1. Append <var>vv</var> to <var>doc</var>'s <a>pending scroll event targets</a>.
1. If (<var>vv</var>, <code>"scroll"</code>) is already in <var>doc</var>'s <a>pending scroll events</a>, abort these steps.
1. Append (<var>vv</var>, <code>"scroll"</code>) to <var>doc</var>'s <a>pending scroll events</a>.

When asked to <dfn export for=Document>run the scroll steps</dfn> for a {{Document}} <var>doc</var>, run these steps:

1. Run the steps to <a spec="css-scroll-snap-2">dispatch pending scrollsnapchanging events</a> for <var>doc</var>.
1. For each item <var>target</var> in <var>doc</var>'s <a>pending scroll event targets</a>,
in the order they were added to the list, run these substeps:

1. If <var>target</var> is a {{Document}}, <a>fire an event</a> named <a event>scroll</a> that bubbles at <var>target</var>.
1. Otherwise, <a>fire an event</a> named <a event>scroll</a> at <var>target</var>.
1. Empty <var>doc</var>'s <a>pending scroll event targets</a>.
1. Run the steps to <a spec="css-scroll-snap-2">dispatch pending scrollsnapchange events</a> for <var>doc</var>.

Whenever scrolling is <a lt="scroll completed">completed</a>, the user agent must run these steps:

Issue: In what order are scrollend events dispatched? Ordered based on scroll start or scroll completion?

1. For each scrolling box <var>box</var> that was scrolled:
Expand All @@ -2056,13 +2043,40 @@ Issue: In what order are scrollend events dispatched? Ordered based on scroll st
be the {{VisualViewport}}. Otherwise, <var>box</var> belongs to an element and let <var>doc</var> be the element's <a>node document</a> and <var>target</var> be the element.
1. If <var>box</var> belongs to a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>, |snapcontainer|,
run the <a spec=css-scroll-snap-2 lt="update scrollsnapchange targets">update scrollsnapchange targets</a> steps for |snapcontainer|.
1. If <var>target</var> is already in <var>doc</var>'s <a>pending scrollend event targets</a>, abort these steps.
1. Append <var>target</var> to <var>doc</var>'s <a>pending scrollend event targets</a>.
1. Run the steps to <a spec="css-scroll-snap-2">dispatch pending scrollsnapchange targets</a> for <var>doc</var>.
1. For each item <var>target</var> in <var>doc</var>'s <a>pending scrollend event targets</a>, in the order they were added to the list, run these substeps:
1. If <var>target</var> is a {{Document}}, <a>fire an event</a> named <a event>scrollend</a> that bubbles at <var>target</var>.
1. Otherwise, <a>fire an event</a> named <a event>scrollend</a> at <var>target</var>.
1. Empty <var>doc</var>'s <a>pending scrollend event targets</a>.
1. If (<var>target</var>, <code>"scrollend"</code>) is already in <var>doc</var>'s <a>pending scroll events</a>, abort these steps.
1. Append (<var>target</var>, <code>"scrollend"</code>) to <var>doc</var>'s <a>pending scroll events</a>.

1. For each item (<var>target</var>, <var>type</var>) in <var>doc</var>'s <a>pending scroll events</a>,
in the order they were added to the list, run these substeps:

1. If <var>target</var> is a {{Document}}, and <var>type</var> is <code>"scroll"</code> or <code>"scrollend"</code>,
<a>fire an event</a> named <a event>scroll</a> that bubbles at <var>target</var>.
1. Otherwise, if <var>type</var> is <code>"scrollsnapchange"</code>, then:
1. Let |blockTarget| and |inlineTarget| be null initially.
1. If the <a>scrollsnapchangeTargetBlock</a> associated with <var>target</var> is a pseudo-element,
set |blockTarget| to the owning element of that <a>scrollsnapchangeTargetBlock</a>.
1. Otherwise, set |blockTarget| to that <a>scrollsnapchangeTargetBlock</a>.
1. If the <a>scrollsnapchangeTargetInline</a> associated with <var>target</var> is a pseudo-element,
set |inlineTarget| to the owning element of that <a>scrollsnapchangeTargetInline</a>.
1. Otherwise, Set |inlineTarget| to that <a>scrollsnapchangeTargetInline</a>.
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchange}} at <var>target</var>
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
{{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget| respectively.
1. Otherwise, if <var>type</var> is <code>"scrollsnapchanging"</code>, then:
1. Let |blockTarget| and |inlineTarget| be null initially.
1. If the <a>scrollsnapchanging block-axis target</a> associated with <var>target</var> is a pseudo-element,
set |blockTarget| to the owning element of that <a>scrollsnapchanging block-axis target</a>.
1. Otherwise, set |blockTarget| to that <a>scrollsnapchanging block-axis target</a>.
1. If the <a>scrollsnapchanging inline-axis target</a> associated with <var>target</var> is a pseudo-element,
set |inlineTarget| to the owning element of that <a>scrollsnapchanging inline-axis target</a>.
1. Otherwise, set |inlineTarget| to that <a>scrollsnapchanging inline-axis target</a>.
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchanging}} at <var>target</var>
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
{{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget|, respectively.
1. Otherwise, <a>fire an event</a> named <var>type</var> at <var>target</var>.
1. Empty <var>doc</var>'s <a>pending scroll events</a>.

Whenever scrolling is <a lt="scroll completed">completed</a>, the user agent must run these steps:

<h3 id=event-summary>Event summary</h3>

Expand Down