[cssom-view-1] Extend scroll into view to ranges (w3c#8254)

Generalizes The scroll an element into view algorithm to work also work for a Range as well as an Element. This is trivial as the only use of Element is to call getBoundingClientRect which Range also defines.

Additionally exports this algorithm for use in whatwg/html#8282.

Nit: also fixes erroneous reference to a non-existent box variable where scrolling box was intended.

Author: bokand

cssom-view-1/Overview.bs

@@ -1161,7 +1161,7 @@ The <dfn method for=Element caniuse=scrollintoview>scrollIntoView(<var>arg</var>
 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 an element into view'>Scroll the element into view</a>
+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>.
 1. Optionally perform some other action that brings the element to the user's attention.
 
@@ -1313,19 +1313,19 @@ The <dfn attribute for=Element>clientHeight</dfn> attribute must run these steps
 
 <h3 id=element-scrolling-members>{{Element}} Scrolling Members</h3>
 
-To <dfn>scroll an element into view</dfn> <var>element</var>,
+To <dfn export>scroll a target into view</dfn> <var>target</var>, which is an <a for="/">Element</a> 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>element</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>box</var>, terminate these steps.
-1. Let <var>element bounding border box</var> be the box that the return value of invoking {{Element/getBoundingClientRect()}} on <var>element</var> represents.
-1. Let <var>scrolling box edge A</var> be the <a>beginning edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge A</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge A</var>.
-1. Let <var>scrolling box edge B</var> be the <a>ending edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge B</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge B</var>.
-1. Let <var>scrolling box edge C</var> be the <a>beginning edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge C</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge C</var>.
-1. Let <var>scrolling box edge D</var> be the <a>ending edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge D</var>.
+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>target bounding border box</var> be the box represented by the return value of invoking Element's {{Element/getBoundingClientRect()}}, if <var>target</var> is an <a for="/">Element</a>, or Range's {{Range/getBoundingClientRect()}}, if <var>target</var> is a <a>Range</a>.
+1. Let <var>scrolling box edge A</var> be the <a>beginning edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge A</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge A</var>.
+1. Let <var>scrolling box edge B</var> be the <a>ending edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge B</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge B</var>.
+1. Let <var>scrolling box edge C</var> be the <a>beginning edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge C</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge C</var>.
+1. Let <var>scrolling box edge D</var> be the <a>ending edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge D</var>.
 1. Let <var>element height</var> be the distance between <var>element edge A</var> and <var>element edge B</var>.
 1. Let <var>scrolling box height</var> be the distance between <var>scrolling box edge A</var> and <var>scrolling box edge B</var>.
 1. Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
@@ -1334,7 +1334,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
 
     1. If <var>block</var> is "<code>start</code>", then align <var>element edge A</var> with <var>scrolling box edge A</var>.
     1. Otherwise, if <var>block</var> is "<code>end</code>", then align <var>element edge B</var> with <var>scrolling box edge B</var>.
-    1. Otherwise, if <var>block</var> is "<code>center</code>", then align the center of <var>element bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>block flow direction</a>.
+    1. Otherwise, if <var>block</var> is "<code>center</code>", then align the center of <var>target bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>block flow direction</a>.
     1. Otherwise, <var>block</var> is "<code>nearest</code>":
         <dl class=switch>
             <dt>If <var>element edge A</var> and <var>element edge B</var> are both outside <var>scrolling box edge A</var> and <var>scrolling box edge B</var>
@@ -1350,7 +1350,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
         </dl>
     1. If <var>inline</var> is "<code>start</code>", then align <var>element edge C</var> with <var>scrolling box edge C</var>.
     1. Otherwise, if <var>inline</var> is "<code>end</code>", then align <var>element edge D</var> with <var>scrolling box edge D</var>.
-    1. Otherwise, if <var>inline</var> is "<code>center</code>", then align the center of <var>element bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>inline base direction</a>.
+    1. Otherwise, if <var>inline</var> is "<code>center</code>", then align the center of <var>target bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>inline base direction</a>.
     1. Otherwise, <var>inline</var> is "<code>nearest</code>":
         <dl class=switch>
             <dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>scrolling box edge C</var> and <var>scrolling box edge D</var>