Skip to content

Commit 938e313

Browse files
DavMilaDavMila
authored
[css-scroll-snap-2] Rename snap events (w3c#10288)
This renames snapchanged to scrollsnapchange and snapchanging to scrollsnapchanging, per the CSSWG [resolution](w3c#9697 (comment))
1 parent f59dc15 commit 938e313

File tree

2 files changed

+73
-73
lines changed

2 files changed

+73
-73
lines changed

‎css-scroll-snap-2/Overview.bs‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ Snap Events {#snap-events}
262262
████████ ███ ████████ ██ ██ ██ ██████
263263
-->
264264

265-
{{snapchanged}} and {{snapchanging}} {#snapchanged-and-snapchanging}
265+
{{scrollsnapchange}} and {{scrollsnapchanging}} {#scrollsnapchange-and-scrollsnapchanging}
266266
--------------------------------------------
267267

268268
CSS scroll snap points are often used as a mechanism to
@@ -283,27 +283,27 @@ Snap Events {#snap-events}
283283
</thead>
284284
<tbody>
285285
<tr>
286-
<th><dfn for="snapchanged" event>snapchanged</dfn></th>
286+
<th><dfn for="scrollsnapchange" event>scrollsnapchange</dfn></th>
287287
<td>{{SnapEvent}}</td>
288288
<td>scroll containers</td>
289289
<td>Fired at the scrolling element or {{Document}} at the end of a scroll (before a {{scrollend}} event)
290290
or after a <a href="https://drafts.csswg.org/css-scroll-snap-1/#re-snap">layout snap</a>
291291
if the element that the scrolling element or Document is snapped to changed.</td>
292292
</tr>
293293
<tr>
294-
<th><dfn for="snapchanging" event>snapchanging</dfn></th>
294+
<th><dfn for="scrollsnapchanging" event>scrollsnapchanging</dfn></th>
295295
<td>{{SnapEvent}}</td>
296296
<td>scroll containers</td>
297297
<td>Fired at the scrolling element or {{Document}} during scrolling (before a {{scroll}} event),
298298
if the element that the scrolling would cause the scroller to snap to is
299-
different from the target reported by the last snapchanging event that was fired.</td>
299+
different from the target reported by the last scrollsnapchanging event that was fired.</td>
300300
</tr>
301301
</tbody>
302302
</table>
303303

304-
<h4 for="snapchanged" id="snapchanged"> snapchanged </h4>
305-
{{snapchanged}} indicates that the snap area to which a snap container is snapped along either axis has changed.
306-
{{snapchanged}} is dispatched:
304+
<h4 for="scrollsnapchange" id="scrollsnapchange"> scrollsnapchange </h4>
305+
{{scrollsnapchange}} indicates that the snap area to which a snap container is snapped along either axis has changed.
306+
{{scrollsnapchange}} is dispatched:
307307

308308
<ol>
309309
<li>
@@ -327,70 +327,70 @@ Snap Events {#snap-events}
327327
</ol>
328328

329329
Scrolling operations always lead to {{scrollend}} events being fired. If a
330-
scrolling operation also results in a {{snapchanged}} event being fired, the
331-
{{snapchanged}} event should be fired before the {{scrollend}} event.
330+
scrolling operation also results in a {{scrollsnapchange}} event being fired, the
331+
{{scrollsnapchange}} event should be fired before the {{scrollend}} event.
332332

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

336336
Each
337337
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
338-
one <dfn export>snapchangedTargetBlock</dfn> and one
339-
<dfn export>snapchangedTargetInline</dfn> in the block and inline axes
338+
one <dfn export>scrollsnapchangeTargetBlock</dfn> and one
339+
<dfn export>scrollsnapchangeTargetInline</dfn> in the block and inline axes
340340
respectively, each of which can either be null if the container is not
341341
snapped in that axis or the {{Element}} to which the container is snapped.
342342

343-
When asked to <dfn export for=Document>update snapchanged targets</dfn>
343+
When asked to <dfn export for=Document>update scrollsnapchange targets</dfn>
344344
for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
345345
|snapcontainer|, run these steps:
346346

347347
1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
348-
1. Let <var>blockTarget</var> be the <a>snapchangedTargetBlock</a> associated
348+
1. Let <var>blockTarget</var> be the <a>scrollsnapchangeTargetBlock</a> associated
349349
with |snapcontainer|.
350-
1. Let <var>inlineTarget</var> be the <a>snapchangedTargetInline</a> associated
350+
1. Let <var>inlineTarget</var> be the <a>scrollsnapchangeTargetInline</a> associated
351351
with |snapcontainer|.
352-
1. Let <var>blockSnapchangingTarget</var> be the <a>snapchangingTargetBlock</a>
352+
1. Let <var>blockScrollSnapchangingTarget</var> be the <a>scrollsnapchangingTargetBlock</a>
353353
associated with |snapcontainer|.
354-
1. Let <var>inlineSnapchangingTarget</var> be the
355-
<a>snapchangingTargetInline</a> associated with |snapcontainer|.
354+
1. Let <var>inlineScrollSnapchangingTarget</var> be the
355+
<a>scrollsnapchangingTargetInline</a> associated with |snapcontainer|.
356356
1. Let <var>snap targets changed</var> be a boolean flag that is initially false.
357-
1. If <var>blockTarget</var> is not the same element as <var>blockSnapchangingTarget</var> or
358-
1. Set the <a>snapchangedTargetBlock</a> associated with |snapcontainer| to
359-
<var>blockSnapchangingTarget</var>.
357+
1. If <var>blockTarget</var> is not the same element as <var>blockScrollSnapchangingTarget</var> or
358+
1. Set the <a>scrollsnapchangeTargetBlock</a> associated with |snapcontainer| to
359+
<var>blockScrollSnapchangingTarget</var>.
360360
1. Set <var>snap targets changed</var> to true.
361-
1. If <var>inlineTarget</var> is not the same element as <var>inlineSnapchangingTarget</var>:
362-
1. Set the <a>snapchangedTargetInline</a> associated with |snapcontainer| to
363-
<var>inlineSnapchangingTarget</var>.
361+
1. If <var>inlineTarget</var> is not the same element as <var>inlineScrollSnapchangingTarget</var>:
362+
1. Set the <a>scrollsnapchangeTargetInline</a> associated with |snapcontainer| to
363+
<var>inlineScrollSnapchangingTarget</var>.
364364
1. Set <var>snap targets changed</var> to true.
365365
1. If <var>snap targets changed</var> is true:
366366
1. If |snapcontainer| is not already in <var>doc</var>'s
367-
<a>pending snapchanged event targets</a>:
367+
<a>pending scrollsnapchange event targets</a>:
368368
1. Append |snapcontainer| to <var>doc</var>'s
369-
<a>pending snapchanged event targets</a>.
369+
<a>pending scrollsnapchange event targets</a>.
370370

371371
Note: When snapping occurs on a scroller (either due to a layout change or a
372-
scrolling operation) the <a>snapchangingTargetBlock</a> and <a>snapchangingTargetInline</a>
372+
scrolling operation) the <a>scrollsnapchangingTargetBlock</a> and <a>scrollsnapchangingTargetInline</a>
373373
associated with that scroller are updated and represent the current snap targets
374-
of that scroller. This allows the <a>update snapchanged targets</a> algorithm
375-
to use these elements to determine whether a {{snapchanged}} event should be fired.
374+
of that scroller. This allows the <a>update scrollsnapchange targets</a> algorithm
375+
to use these elements to determine whether a {{scrollsnapchange}} event should be fired.
376376

377-
When asked to <dfn>dispatch pending snapchanged events</dfn> for a {{Document}},
377+
When asked to <dfn>dispatch pending scrollsnapchange events</dfn> for a {{Document}},
378378
<var>doc</var>, run these steps:
379-
1. For each item <var>target</var> in |doc|'s <a>pending snapchanged event targets</a>:
380-
1. Fire a {{SnapEvent}}, |snapevent|, named {{snapchanged}} at <var>target</var>
379+
1. For each item <var>target</var> in |doc|'s <a>pending scrollsnapchange event targets</a>:
380+
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchange}} at <var>target</var>
381381
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
382-
{{SnapEvent/snapTargetInline}} attributes be the <a>snapchangedTargetBlock</a> and the
383-
<a>snapchangedTargetInline</a>, respectively, that are associated with <var>target</var>.
384-
1. Empty <var>doc</var>'s <a>pending snapchanged event targets</a>.
382+
{{SnapEvent/snapTargetInline}} attributes be the <a>scrollsnapchangeTargetBlock</a> and the
383+
<a>scrollsnapchangeTargetInline</a>, respectively, that are associated with <var>target</var>.
384+
1. Empty <var>doc</var>'s <a>pending scrollsnapchange event targets</a>.
385385

386-
<h4 id="snapchanging"> snapchanging </h4>
387-
{{snapchanging}} is dispatched:
386+
<h4 id="scrollsnapchanging"> scrollsnapchanging </h4>
387+
{{scrollsnapchanging}} is dispatched:
388388
* during a scrolling operation, if the element to which a
389389
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> would
390390
<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> (in either axis) changes, or
391-
* if a [[css-scroll-snap-1#re-snap|layout change]] occurs such that a {{snapchanged}} event
392-
is to be dispatched. In this case, as with the scrolling case, the {{snapchanging}} event
393-
should be dispatched before the {{snapchanged}} event.
391+
* if a [[css-scroll-snap-1#re-snap|layout change]] occurs such that a {{scrollsnapchange}} event
392+
is to be dispatched. In this case, as with the scrolling case, the {{scrollsnapchanging}} event
393+
should be dispatched before the {{scrollsnapchange}} event.
394394

395395
A scrolling operation might animate towards a particular position (e.g.
396396
scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic
@@ -404,64 +404,64 @@ Snap Events {#snap-events}
404404
* In the latter case, the intended scroll position is the current scroll offset as
405405
determined by the user's input.
406406

407-
{{snapchanging}} aims to let the web page know, as early as possible,
407+
{{scrollsnapchanging}} aims to let the web page know, as early as possible,
408408
that the scrolling operation will result in a change in the element the snap
409409
container is snapped to. The user agent should evaluate whether to trigger
410-
{{snapchanging}} based on the <a>eventual snap target</a> to which the scroller would
410+
{{scrollsnapchanging}} based on the <a>eventual snap target</a> to which the scroller would
411411
<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> were the scrolling operation
412412
to reach its intended scroll position.
413413

414-
Note: Since snapchanging gives the web page hints about future snapping,
415-
the snapping hinted at by a snapchanging event might not materialize since it
414+
Note: Since scrollsnapchanging gives the web page hints about future snapping,
415+
the snapping hinted at by a scrollsnapchanging event might not materialize since it
416416
will be possible for subsequent scrolling input to further alter the snap
417417
container's scroll position and result in a different eventual snap target.
418418

419419

420-
{{snapchanging}} events are fired before {{scroll}} events.
420+
{{scrollsnapchanging}} events are fired before {{scroll}} events.
421421

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

425425
Each
426426
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
427-
one <dfn>snapchangingTargetBlock</dfn>
428-
and one <dfn>snapchangingTargetInline</dfn>in the block and inline axes
427+
one <dfn>scrollsnapchangingTargetBlock</dfn>
428+
and one <dfn>scrollsnapchangingTargetInline</dfn> in the block and inline axes
429429
respectively, each of which can either be null if the container is not
430430
snapping in that axis or the {{Element}} to which the container is snapping.
431431

432-
When asked to <dfn export for=Document>update snapchanging targets</dfn>
432+
When asked to <dfn export for=Document>update scrollsnapchanging targets</dfn>
433433
for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
434434
|snapcontainer|, given an {{Element}} newBlockTarget and an {{Element}}
435435
newInlineTarget, run these steps:
436436

437437
1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
438-
1. Let <var>blockTarget</var> be the <a>snapchangingTargetBlock</a> that is
438+
1. Let <var>blockTarget</var> be the <a>scrollsnapchangingTargetBlock</a> that is
439439
associated with |snapcontainer|.
440-
1. Let <var>inlineTarget</var> be the <a>snapchangingTargetInline</a> that is
440+
1. Let <var>inlineTarget</var> be the <a>scrollsnapchangingTargetInline</a> that is
441441
associated with |snapcontainer|.
442442
1. If <var>newBlockTarget</var> is not the same element as <var>blockTarget</var>:
443-
1. Set the <a>snapchangingTargetBlock</a> associated with |snapcontainer| to
443+
1. Set the <a>scrollsnapchangingTargetBlock</a> associated with |snapcontainer| to
444444
<var>newBlockTarget</var>.
445445
1. If |snapcontainer| is not already in <var>doc</var>'s
446-
<a>pending snapchanging event targets</a>,
446+
<a>pending scrollsnapchanging event targets</a>,
447447
1. Append |snapcontainer| to <var>doc</var>'s
448-
<a>pending snapchanging event targets</a>
448+
<a>pending scrollsnapchanging event targets</a>
449449
1. If <var>newInlineTarget</var> is not the same element as <var>inlineTarget</var>:
450-
1. Set the <a>snapchangingTargetInline</a> associated with |snapcontainer| to
450+
1. Set the <a>scrollsnapchangingTargetInline</a> associated with |snapcontainer| to
451451
<var>newInlineTarget</var>.
452452
1. If |snapcontainer| is not already in <var>doc</var>'s
453-
<a>pending snapchanging event targets</a>,
453+
<a>pending scrollsnapchanging event targets</a>,
454454
1. Append |snapcontainer| to <var>doc</var>'s
455-
<a>pending snapchanging event targets</a>.
455+
<a>pending scrollsnapchanging event targets</a>.
456456

457-
When asked to <dfn>dispatch pending snapchanging events</dfn> for a {{Document}},
457+
When asked to <dfn>dispatch pending scrollsnapchanging events</dfn> for a {{Document}},
458458
<var>doc</var>, run these steps:
459-
1. For each item <var>target</var> in |doc|'s <a>pending snapchanging event targets</a>:
460-
1. Fire a {{SnapEvent}}, |snapevent|, named {{snapchanging}} at <var>target</var>
459+
1. For each item <var>target</var> in |doc|'s <a>pending scrollsnapchanging event targets</a>:
460+
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchanging}} at <var>target</var>
461461
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
462-
{{SnapEvent/snapTargetInline}} attributes be the <a>snapchangingTargetBlock</a> and the
463-
<a>snapchangingTargetInline</a>, respectively, that are associated with <var>target</var>.
464-
1. Empty <var>doc</var>'s <a>pending snapchanging event targets</a>.
462+
{{SnapEvent/snapTargetInline}} attributes be the <a>scrollsnapchangingTargetBlock</a> and the
463+
<a>scrollsnapchangingTargetInline</a>, respectively, that are associated with <var>target</var>.
464+
1. Empty <var>doc</var>'s <a>pending scrollsnapchanging event targets</a>.
465465

466466
<h4 id="snap-events-on-layout-changes">Snap Events due to Layout Changes </h4>
467467
When a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
@@ -473,9 +473,9 @@ Snap Events {#snap-events}
473473
1. Let <var>newInlineTarget</var> be the element that |snapcontainer| has
474474
<a spec="css-scroll-snap-1" lt="scroll snap">snapped</a> to
475475
in the inline axis or null if it did not snap to any element.
476-
1. Run the steps to <a>update snapchanging targets</a> with <var>newBlockTarget</var>
476+
1. Run the steps to <a>update scrollsnapchanging targets</a> with <var>newBlockTarget</var>
477477
as newBlockTarget and <var>newInlineTarget</var> as newInlineTarget.
478-
1. Run the steps to <a>update snapchanged targets</a> for |snapcontainer|.
478+
1. Run the steps to <a>update scrollsnapchange targets</a> for |snapcontainer|.
479479

480480

481481
SnapEvent interface
@@ -511,8 +511,8 @@ SnapEvent interface
511511
for the associated snap event.
512512
</div>
513513

514-
For {{snapchanged}} events, the snap position is the position already
515-
realized by the snap container after a scroll snap. For {{snapchanging}}
514+
For {{scrollsnapchange}} events, the snap position is the position already
515+
realized by the snap container after a scroll snap. For {{scrollsnapchanging}}
516516
events it is the snap position that the snap container will eventually
517517
snap to when the scrolling operation ends.
518518

‎cssom-view-1/Overview.bs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1917,7 +1917,7 @@ Whenever a <a>viewport</a> gets scrolled (whether in response to user interactio
19171917

19181918
1. Let <var>doc</var> be the <a>viewport’s</a> associated {{Document}}.
19191919
1. If <var>doc</var> is a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
1920-
run the steps to <a spec=css-scroll-snap-2 lt="update snapchanging targets">update snapchanging targets</a>
1920+
run the steps to <a spec=css-scroll-snap-2 lt="update scrollsnapchanging targets">update scrollsnapchanging targets</a>
19211921
for <var>doc</var> with <var>doc</var>'s <a spec="css-scroll-snap-2">eventual snap target</a> in the block axis
19221922
as newBlockTarget and <var>doc</var>'s <a spec="css-scroll-snap-2">eventual snap target</a> in the inline axis
19231923
as newInlineTarget.
@@ -1928,7 +1928,7 @@ Whenever an element gets scrolled (whether in response to user interaction or by
19281928

19291929
1. Let <var>doc</var> be the element's <a>node document</a>.
19301930
1. If the element is a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
1931-
run the steps to <a spec=css-scroll-snap-2 lt="update snapchanging targets">update snapchanging targets</a>
1931+
run the steps to <a spec=css-scroll-snap-2 lt="update scrollsnapchanging targets">update scrollsnapchanging targets</a>
19321932
for the element with the element's <a spec="css-scroll-snap-2">eventual snap target</a> in the block axis
19331933
as newBlockTarget and the element's <a spec="css-scroll-snap-2">eventual snap target</a> in the inline axis
19341934
as newInlineTarget.
@@ -1944,14 +1944,14 @@ Whenever a <a>visual viewport</a> gets scrolled (whether in response to user int
19441944

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

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

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

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

@@ -1962,10 +1962,10 @@ Issue: In what order are scrollend events dispatched? Ordered based on scroll st
19621962
If <var>box</var> belongs to a {{VisualViewport}}, let <var>doc</var> be the {{VisualViewport}}'s <a for=visualviewport>associated document</a> and <var>target</var>
19631963
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.
19641964
1. If <var>box</var> belongs to a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>, |snapcontainer|,
1965-
run the <a spec=css-scroll-snap-2 lt="update snapchanged targets">update snapchanged targets</a> steps for |snapcontainer|.
1965+
run the <a spec=css-scroll-snap-2 lt="update scrollsnapchange targets">update scrollsnapchange targets</a> steps for |snapcontainer|.
19661966
1. If <var>target</var> is already in <var>doc</var>'s <a>pending scrollend event targets</a>, abort these steps.
19671967
1. Append <var>target</var> to <var>doc</var>'s <a>pending scrollend event targets</a>.
1968-
1. Run the steps to <a spec="css-scroll-snap-2">dispatch pending snapchanged targets</a> for <var>doc</var>.
1968+
1. Run the steps to <a spec="css-scroll-snap-2">dispatch pending scrollsnapchange targets</a> for <var>doc</var>.
19691969
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:
19701970
1. If <var>target</var> is a {{Document}}, <a>fire an event</a> named <a event>scrollend</a> that bubbles at <var>target</var>.
19711971
1. Otherwise, <a>fire an event</a> named <a event>scrollend</a> at <var>target</var>.

0 commit comments

Comments
 (0)