[cssom-view] Add more positioning control to scrollIntoView

* Add "center" to ScrollLogicalPosition.
* Add inline dictionary member to ScrollIntoViewOptions.

Ref. https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152
Ref. https://lists.w3.org/Archives/Public/www-style/2015Dec/0050.html

Author: zcorpan

cssom-view/Overview.bs

@@ -84,6 +84,7 @@ url: http://www.w3.org/TR/DOM-Level-3-Events/#interface-MouseEvent; type: interf
 spec:dom-ls; type:method; text:addEventListener()
 spec:css-display-3; type:value; for:display; text:table
 spec:css-position-3; type:property; text:position
+spec:dom-ls; type:interface; text:Document
 </pre>
 
 <script src=https://resources.whatwg.org/file-bug.js async></script>
@@ -990,9 +991,10 @@ Extensions to the {{Element}} Interface {#extension-to-the-element-interface}
 =============================================================================
 
 <pre class=idl>
-enum ScrollLogicalPosition { "start", "end" };
+enum ScrollLogicalPosition { "start", "center", "end" };
 dictionary ScrollIntoViewOptions : ScrollOptions {
   ScrollLogicalPosition block = "start";
+  ScrollLogicalPosition inline;
 };
 
 partial interface Element {
@@ -1049,16 +1051,15 @@ algorithm:
 
 The <dfn method for=Element>scrollIntoView(<var>arg</var>)</dfn> method must run these steps:
 
-<!-- scrollIntoView() means top=true but scrollIntoView(undefined) means top=false, to align with impls. -->
+<!-- scrollIntoView() means arg=true but scrollIntoView(undefined) means arg=false, to align with impls. -->
 
 1. Let <var>options</var> be null.
 1. If <var>arg</var> is an object, let <var>options</var> be <var>arg</var>.
 1. <a lt="converted to an IDL value">Convert</a> <var>options</var> to a {{ScrollIntoViewOptions}} dictionary. [[!WEBIDL]]
 1. If <var>arg</var> is false, let the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> have the value "<code>end</code>".
 1. If the element does not have any associated <a>layout box</a> terminate these steps.
 1. <a lt='scroll an element into view'>Scroll the element into view</a>
-    with the <i>align to top</i> flag set if <var>options</var> {{ScrollIntoViewOptions/block}} dictionary member has the value "<code>start</code>",
-    and the scroll behavior being the value of the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
+    with the options <var>options</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:
@@ -1218,23 +1219,29 @@ document are not reflected in the objects.
 {{Element}} Scrolling Members {#element-scrolling-members}
 ----------------------------------------------------------
 
-To <dfn>scroll an element into view</dfn> <var>element</var>, optionally with an <i>align to top flag</i> set, and optionally with a scroll behavior
-<var>behavior</var> (which is <code>"auto"</code> if omitted), means to run these steps for each ancestor element or <a>viewport</a> that establishes
+To <dfn>scroll an element into view</dfn> <var>element</var>,
+with a {{ScrollIntoViewOptions}} dictionary <var>options</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>box edge D</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. Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
 1. Let <var>scrolling box width</var> be the distance between <var>scrolling box edge C</var> and <var>scrolling box edge D</var>.
 1. Let <var>position</var> be the scroll position <var>scrolling box</var> would have by following these steps:
 
-    1. If the <i>align to top flag</i> is set align <var>element edge A</var> with <var>scrolling box edge A</var>.
-    1. Otherwise, the <i>align to top flag</i> is not set; align <var>element edge B</var> with <var>scrolling box edge B</var>.
-    1. <dl class=switch>
+    1. If the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> is "start", align <var>element edge A</var> with <var>scrolling box edge A</var>.
+    1. Otherwise, if the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> is "end"; align <var>element edge B</var> with <var>scrolling box edge B</var>.
+    1. Otherwise, it is "center"; 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. If the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> is "start", align <var>element edge C</var> with <var>scrolling box edge C</var>.
+    1. Otherwise, if the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> is "end"; align <var>element edge D</var> with <var>scrolling box edge D</var>.
+    1. Otherwise, if the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> is  "center", 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, it is not set; follow these steps:
+        <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>
             <dd>Do nothing.
 
@@ -1258,6 +1265,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
             Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.
             Let <var>associated element</var> be <var>document</var>'s root element, if there is one, or null otherwise.
     </dl>
+1. Let <var>behavior</var> be the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
 1. <a>Perform a scroll</a> of <var>scrolling box</var> to <var>position</var>, <var>associated element</var> as the associated element and <var>behavior</var> as the scroll behavior.