[cssom-view-1] Add container option to scrollIntoView options. (#11673)

* [cssom-view-1] Add container option to scrollIntoView options.

Adds the container option to ScrollIntoViewOptions
allowing scrolling only the nearest containing scrolling box
as resolved in #9452.

* Update cssom-view-1/Overview.bs

---------

Co-authored-by: Tab Atkins Jr. <[email protected]>

Author: flackr

cssom-view-1/Overview.bs

@@ -1166,8 +1166,11 @@ enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
 dictionary ScrollIntoViewOptions : ScrollOptions {
   ScrollLogicalPosition block = "start";
   ScrollLogicalPosition inline = "nearest";
+  ScrollIntoViewContainer container = "all";
 };
 
+enum ScrollIntoViewContainer { "all", "nearest" };
+
 dictionary CheckVisibilityOptions {
     boolean checkOpacity = false;
     boolean checkVisibilityCSS = false;
@@ -1291,16 +1294,19 @@ The <dfn method for=Element caniuse=scrollintoview>scrollIntoView(<var>arg</var>
 1. Let <var>behavior</var> be "<code>auto</code>".
 1. Let <var>block</var> be "<code>start</code>".
 1. Let <var>inline</var> be "<code>nearest</code>".
+1. Let <var>container</var> be <code>null</code>.
 1. If <var>arg</var> is a {{ScrollIntoViewOptions}} dictionary, then:
     1. Set <var>behavior</var> to the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
     1. Set <var>block</var> to the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var>.
     1. Set <var>inline</var> to the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var>.
+    1. If the {{ScrollIntoViewOptions/container}} dictionary member of <var>options</var>,
+        set <var>container</var> to this element.
 1. Otherwise, if <var>arg</var> is false, then set <var>block</var> to "<code>end</code>".
 1. If the element does not have any associated [=CSS/box=],
     or is not available to user-agent features,
     then return.
 1. <a lt='scroll a target into view'>Scroll the element into view</a>
-    with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
+    with <var>behavior</var>, <var>block</var>, <var>inline</var>, and <var>container</var>.
 1. Optionally perform some other action that brings the element to the user's attention.
 
 The <dfn method for=Element lt="scroll(options)|scroll(x, y)">scroll()</dfn> method must run these steps:
@@ -1513,26 +1519,30 @@ run the following steps:
 To <dfn export>scroll a target into view</dfn> <var>target</var>, which is an <a for="/">Element</a>, [=pseudo-element=], or <a>Range</a>,
 with a scroll behavior <var>behavior</var>,
 a block flow direction position <var>block</var>,
-and an inline base direction position <var>inline</var>,
-means to run these steps for each ancestor element or <a>viewport</a> that establishes
-a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a>scrolling box</a>:
-
-1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
-1. Let <var>position</var> be the scroll position resulting from running the steps to <a>determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> as the |scroll behavior|,
-    <var>block</var> as the |block flow position|, <var>inline</var> as the |inline base direction position| and <var>scrolling box</var> as the |scrolling box|.
-1. If <var>position</var> is the same as <var>scrolling box</var>'s current scroll position, and <var>scrolling box</var> does not have an ongoing <a>smooth scroll</a>, then return.
-1. <dl class=switch>
-        <dt>If <var>scrolling box</var> is associated with an element
-        <dd>
-            <a for="/">Perform a scroll</a> of the element's <var>scrolling box</var> to <var>position</var>, with the element as the associated element and
-            <var>behavior</var> as the scroll behavior.
-        <dt>If <var>scrolling box</var> is associated with a <a>viewport</a>
-        <dd>
-            1. Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.
-            1. Let <var>root element</var> be <var>document</var>'s [=root element=], if there is one, or null otherwise.
-            1. <a for="viewport">Perform a scroll</a> of the <a>viewport</a> to <var>position</var>, with <var>root element</var> as the associated element and <var>behavior</var>
-                as the scroll behavior.
-    </dl>
+an inline base direction position <var>inline</var>,
+and an optional containing <a>Element</a> to stop scrolling after reaching <var>container</var>,
+means to run these steps:
+
+1. For each ancestor element or <a>viewport</a> that establishes a <a>scrolling box</a> <var>scrolling box</var>,
+    in order of innermost to outermost <a>scrolling box</a>, run these substeps:
+    1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
+    1. Let <var>position</var> be the scroll position resulting from running the steps to <a>determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> as the |scroll behavior|,
+        <var>block</var> as the |block flow position|, <var>inline</var> as the |inline base direction position| and <var>scrolling box</var> as the |scrolling box|.
+    1. If <var>position</var> is not the same as <var>scrolling box</var>'s current scroll position, or <var>scrolling box</var> has an ongoing <a>smooth scroll</a>,
+        1. <dl class=switch>
+                <dt>If <var>scrolling box</var> is associated with an element
+                <dd>
+                    <a for="/">Perform a scroll</a> of the element's <var>scrolling box</var> to <var>position</var>, with the element as the associated element and
+                    <var>behavior</var> as the scroll behavior.
+                <dt>If <var>scrolling box</var> is associated with a <a>viewport</a>
+                <dd>
+                    1. Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.
+                    1. Let <var>root element</var> be <var>document</var>'s [=root element=], if there is one, or null otherwise.
+                    1. <a for="viewport">Perform a scroll</a> of the <a>viewport</a> to <var>position</var>, with <var>root element</var> as the associated element and <var>behavior</var>
+                        as the scroll behavior.
+            </dl>
+    1. If <var>container</var> is not null and <var>scrolling box</var> is a [=shadow-including inclusive ancestor=] of <var>container</var>,
+        abort the rest of these steps.
 
 </div>