[css-scroll-snap-1] Make the 'scoping positions to visible boxes' requirement clearer. Fixes #2526.

Author: tabatkins

css-scroll-snap-1/Overview.bs

@@ -591,28 +591,36 @@ Scoping Valid Snap Positions to Visible Boxes</h4>
 
     Since the purpose of scroll snapping is to align content within the viewport
     for optimal viewing,
-    a <a>scroll container</a> cannot be <a>snapped</a> to a <a>snap area</a>
-    if no part of it is within the <a>snapport</a>.
-    For example, a <a>snap area</a> is top-aligned to the <a>snapport</a>
-    if its top edge is coincident with the <a>snapport</a>’s top edge;
-    however, this scroll position is nonetheless not a valid <a>snap position</a>
-    if the entire <a>snap area</a> is outside the <a>snapport</a>
-    (because the required alignment, though satisfied, would not be relevant to the viewer).
-
-    <figure>
-        <pre class="ascii-art">
-            ╔════viewport════╗┈┈┈┈┈┈┈┈┌──────────────┐
-            ║  ┌─────┐ ┌──┐  ║        │ top-snapping │
-            ║  ├──┐  │ └──┘  ║        │   element    │
-            ║  └──┴──┘       ║        │              │
-            ╚════════════════╝        │              │
-                                      └──────────────┘
-        </pre>
-        <figcaption>
-          Alignment of an off-screen element
-          is not considered <a>snapping</a>.
-        </figcaption>
-    </figure>
+    a scroll position cannot be considered a valid <a>snap position</a>
+    if <a>snapping</a> to it would leave the contributing <a>snap area</a>
+    entirely outside the <a>snapport</a>,
+    even if it otherwise satisfies the required alignment of the <a>snap area</a>.
+
+    <div class="example">
+        For example, a <a>snap area</a> is top-aligned to the <a>snapport</a>
+        if its top edge is coincident with the <a>snapport</a>’s top edge;
+        and this would be considered a valid <a>snap position</a>
+        for block-axis start-aligned snapping of that <a>snap area</a>
+        <em>if at least part of the <a>snap area</a> is on-screen</em>.
+        If the entire <a>snap area</a> is outside the <a>snapport</a>, however,
+        then the <a>scroll container</a> cannot be considered to be <a>snapped</a>
+        because the required alignment, though satisfied, would not be relevant to the viewer.
+
+        <figure>
+            <pre class="ascii-art">
+                ╔════viewport════╗┈┈┈┈┈┈┈┈┌──────────────┐
+                ║  ┌─────┐ ┌──┐  ║        │ top-snapping │
+                ║  ├──┐  │ └──┘  ║        │   element    │
+                ║  └──┴──┘       ║        │              │
+                ╚════════════════╝        │              │
+                                          └──────────────┘
+            </pre>
+            <figcaption>
+              Alignment of an off-screen element
+              is not considered <a>snapping</a>.
+            </figcaption>
+        </figure>
+    </div>
 
     <details class="note">
         <summary>Why limit snapping to only when the element is visible?</summary>