Resolve issue 4 by defining how nested large snap areas work.

Author: tabatkins

css-scroll-snap/Overview.bs

@@ -514,7 +514,7 @@ Scoping Valid Snap Positions to Visible Boxes</h4>
     if the entire <a>snap area</a> is outside the <a>snapport</a>.
 
     <figure>
-        <pre>
+        <pre class="ascii-art">
             ╔════viewport════╗┈┈┈┈┈┈┈┈┌──────────────┐
             ║  ┌─────┐ ┌──┐  ║        │ top-snapping │
             ║  ├──┐  │ └──┘  ║        │   element    │
@@ -546,7 +546,9 @@ Scoping Valid Snap Positions to Visible Boxes</h4>
 Snapping Boxes that Overflow the Scrollport</h4>
 
     If the <a>snap area</a> is larger than the <a>snapport</a> in a particular axis,
-    then any scroll position in which the <a>snap area</a> covers the <a>snapport</a>
+    then any scroll position in which the <a>snap area</a> covers the <a>snapport</a>,
+    and the distance between the geometrically previous and subsequent <a>snap positions</a> in that axis
+    is larger than size of the <a>snapport</a> in that axis,
     is a valid <a>snap position</a> in that axis.
     The UA may use the specified alignment as a more precise target
     for certain scroll operations (e.g. explicit paging).
@@ -567,7 +569,63 @@ Snapping Boxes that Overflow the Scrollport</h4>
         until it is scrolled sufficiently to trigger snapping to a different <a>snap position</a>.
     </div>
 
-    Issue: Deal with case of overlapping snap areas, some of which are smaller and others larger than the viewport.
+    <div class=example>
+        For another example,
+        mandatory top-snapping on nested <{section}> elements
+        can produce large snapping areas
+        (from large top-level sections)
+        potentially filled with smaller snapping areas
+        (from the subsections).
+        When the subsections are small enough,
+        they snap normally;
+        when they're longer,
+        the viewer can scroll arbitrarily within them,
+        or within a large segment of the top-level section that has no subsections to snap to.
+
+        <figure>
+            <pre class=ascii-art>
+            ┌─ top-level section ─┐ ━┓
+            │                     │ 1┃
+            │                     │  ┃
+            │                     │ ━┩
+            │                     │  ┆
+            │                     │  ┆
+            │┌─── sub-section ───┐│  ╯ ━┓
+            │└───────────────────┘│    2┃
+            │┌─── sub-section ───┐│     ┃ ━┓
+            ││                   ││    ━┛ 3┃
+            │└───────────────────┘│        ┃
+            │┌─── sub-section ───┐│ ━┓    ━┛
+            │└───────────────────┘│ 4┃
+            │┌─── sub-section ───┐│  ┃ ━┓
+            ││                   ││ ━┛ 5┃
+            ││                   ││     ┃
+            ││                   ││    ━┩
+            ││                   ││     ┆
+            ││                   ││     ┆
+            ││                   ││     ┆
+            │└───────────────────┘│     ┆
+            └─────────────────────┘     ╯
+            </pre>
+            <figcaption>
+                In the figure above,
+                the five numbered viewports
+                represent the five snap positions
+                associated with the top-level section
+                and its four subsections.
+                Because the first and last snap positions are part of ranges taller than the viewport,
+                the viewer is allowed to scroll freely
+                between the top and bottom of each range.
+            </figcaption>
+        </figure>
+
+        Note: If the author had instead set mandatory snap positions on the headings of each section
+        (rather than the sections themselves),
+        the contents of the first and fifth sections
+        would be partially inaccessible to the user,
+        as the heading snap area does not extend to cover the whole section.
+    </div>
+
 
 <h4 id="unreachable">
 Unreachable Snap Positions</h4>

default.css

@@ -39,6 +39,7 @@
 	pre.ascii-art {
 		display: table; /* shrinkwrap */
 		margin: 1em auto;
+		line-height: normal;
 	}
 
 	/* Displaying the output of text layout, particularly when