[css-scroll-snap-1] Define selection of snap area when there are multiple aligned candidates. (w3c#10057)

Implements the algorithm agreed upon in w3c#9622 to select a particular snap area in each axis.

Author: flackr

css-scroll-snap-1/Overview.bs

@@ -250,13 +250,16 @@ Scroll Snap Model {#overview}
 
     The act of adjusting the scroll position
     of a scroll container’s scrollport
-    such that it is aligned to a snap position
+    such that it is aligned to a snap area
     is called <dfn export lt="scroll snap" local-lt="snap">snapping</dfn>,
-    and a <a>scroll container</a> is said to be
-    <a>snapped</a> to a <a>snap position</a>
-    if its scrollport’s scroll position
-    is that <a>snap position</a>
+    and a <a>scroll container</a> may be
+    <a>snapped</a> to a <a>snap area</a>
+    in each axis
+    if its scrollport is aligned with that <a>snap area</a> in that axis
     and there is no active scrolling operation.
+    When there are multiple valid snap areas,
+    a single one is chosen for each axis when <a>snapping</a>
+    according to the algorithm for <a href="#multiple-aligned-snap-areas">selecting between multiple aligned snap areas</a>.
     The CSS Scroll Snap Module
     intentionally does not specify nor mandate
     any precise animations or physics used to enforce <a>snap positions</a>;
@@ -417,18 +420,17 @@ Re-snapping After Layout Changes</h4>
     the UA must re-evaluate the resulting <a>scroll position</a>,
     and re-snap if required.
     If the <a>scroll container</a> was <a>snapped</a> before the content change
-    and that same <a>snap position</a> still exists
-    (e.g. its associated element was not deleted),
-    the scroll container must be re-snapped to that same snap position
+    and those same [=snap areas=] still exist
+    (e.g. their associated elements were not deleted),
+    the scroll container must be re-snapped to those same snap areas
     after the content change.
-    If multiple boxes were [=snapped=] before
-    and their [=snap positions=] no longer coincide,
-    then if one of them is focused or targeted,
-    the [=scroll container=] must re-snap to that one
-    and otherwise which one to re-snap to is UA-defined.
-    (The UA may, for example, track which element is snapped
-    as layout shifts align and de-align
-    the [=snap positions=] of other elements.)
+    A <a>snap area</a> can be [=snapped=] in each axis,
+    following the algorithm for <a href="#multiple-aligned-snap-areas">selecting between multiple aligned snap areas</a>.
+    If it is not possible to snap to both
+    (e.g. if snapping to one resulted in the other being offscreen),
+    it must prefer the focused box,
+    followed by the targeted box,
+    followed by the block axis if neither box is focused or targeted.
 
     Scrolling required by a re-snap operation to a new or different box
     must behave and animate the same way as
@@ -1088,6 +1090,27 @@ Choosing Snap Positions {#choosing}
         if its nearest <a>scroll container</a> is a <a>scroll snap container</a>.
         The user agent <em>may</em> also do this even when the <a>scroll container</a> has ''scroll-snap-type: none''.
 
+<h4 id="multiple-aligned-snap-areas">Selecting between multiple aligned snap areas</h4>
+
+    When <a>snapping</a> to a scroll position
+    that is aligned with multiple [=scroll snap areas=],
+    the following algorithm procedure is used to determined which box is <a>snapped</a> on the block and inline axes
+    for a particular <a>scroll container</a>:
+
+    1. Let |scroll position| be the scroll position of the <a>scroll container</a>
+    1. Let |inline| be the set of boxes whose [=scroll snap areas=] are aligned at this |scroll position| in the inline axis.
+    1. Let |block| be the set of boxes whose [=scroll snap areas=] are aligned at this |scroll position| in the block axis.
+    1. For each |list| of |block| and |inline|:
+        1. If |list| contains the focused box, remove all other boxes from |list|.
+        1. If |list| contains the targeted box, remove all other boxes from |list|.
+        1. For each |box| in |list|:
+            1. Remove any box from |list| which is an ancestor of |box|.
+    1. If |inline| and |block| are overlapping sets:
+        1. Replace |inline| with the intersection of |inline| and |block|.
+        1. Replace |block| with the intersection of |inline| and |block|.
+    1. Select the first element in <a>tree order</a> from |inline| as the <a>snapped</a> inline axis box.
+    1. Select the first element in <a>tree order</a> from |block| as the <a>snapped</a> block axis box.
+
 <!--
 ██        ███████  ██    ██  ██████   ██     ██    ███    ██    ██ ████████   ██████
 ██       ██     ██ ███   ██ ██    ██  ██     ██   ██ ██   ███   ██ ██     ██ ██    ██