[cssom-view] Make scrollIntoView use the element's bounding border box so that elements with several boxes work. Also make scrollIntoView work for SVG elements. https://www.w3.org/Bugs/Public/show_bug.cgi?id=22060

Author: Simon Pieters

cssom-view/Overview.src.html

@@ -214,7 +214,7 @@ <h2>Terminology</h2>
 <p>A scrolling box of a <span>viewport</span> or element has two <dfn>overflow directions</dfn>, depending on the <span>viewport</span>'s or element's
 <span>block flow direction</span> and <span>inline base direction</span>, as follows:
 
-<dl>
+<dl class=switch>
  <dt>If the <span>block flow direction</span> is top-to-bottom and the <span>inline base direction</span> is left-to-right
  <dt>If the <span>block flow direction</span> is left-to-right and the <span>inline base direction</span> is left-to-right
  <dd><p>Rightward and downward.
@@ -844,7 +844,7 @@ <h2>Extensions to the <code title>Element</code> Interface</h2>
 
 <p>The <dfn title=dom-Element-scrollIntoView><code>scrollIntoView(<var>top</var>, <var>options</var>)</code></dfn> method must run these steps:</p>
 <ol>
- <li><p>If the element does not have any associated <span>CSS layout box</span> terminate these steps.</p></li>
+ <li><p>If the element does not have any associated <span>layout box</span> terminate these steps.</p></li>
  <li><p><span title='scroll an element into view'>Scroll the element into view</span> with the
  <i>align to top flag</i> set if <var>top</var> is true, and the scroll behavior being the value of the <code title>behavior</code>
  dictionary member of <var>options</var>.</p></li>
@@ -1009,7 +1009,7 @@ <h3><code title>Element</code> Scrolling Members</h3>
 
 <p>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 title>auto</code> if omitted), means to run these steps for each ancestor element or <span>viewport</span> that establishes
-a scrolling box <var>box</var>, in order of innermost to outermost scrolling box:</p>
+a scrolling box <var>scrolling box</var>, in order of innermost to outermost scrolling box:</p>
 
 <ol>
  <li><p>If the <code data-anolis-spec=dom>Document</code> associated
@@ -1018,50 +1018,56 @@ <h3><code title>Element</code> Scrolling Members</h3>
  <span>viewport</span> associated with <var>box</var>, terminate these
  steps.</p></li>
 
- <li><p>Let <var>box edge A</var> be the <span title="beginning edges">beginning edge</span> in the <span>block flow direction</span> of <var>box</var>, and let
- <var>element edge A</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge A</var>.
+ <li><p>Let <var>element bounding border box</var> be the box that the return value of invoking
+ <code title=dom-Element-getBoundingClientRect>getBoundingClientRect()</code> on <var>element</var> represents.
+ 
+ <li><p>Let <var>scrolling box edge A</var> be the <span title="beginning edges">beginning edge</span> in the <span>block flow direction</span> 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>.
 
- <li><p>Let <var>box edge B</var> be the <span title="ending edges">ending edge</span> in the <span>block flow direction</span> of <var>box</var>, and let
- <var>element edge B</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge B</var>.
+ <li><p>Let <var>scrolling box edge B</var> be the <span title="ending edges">ending edge</span> in the <span>block flow direction</span> 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>.
 
- <li><p>Let <var>box edge C</var> be the <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> of <var>box</var>, and
- let <var>element edge C</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge C</var>.
+ <li><p>Let <var>scrolling box edge C</var> be the <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> 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>.
 
- <li><p>Let <var>box edge D</var> be the <span title="ending edges">ending edge</span> in the <span>inline base direction</span> of <var>box</var>, and let
- <var>element edge D</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge D</var>.
+ <li><p>Let <var>scrolling box edge D</var> be the <span title="ending edges">ending edge</span> in the <span>inline base direction</span> 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>.
 
  <li><p>Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
 
- <li><p>Let <var>box width</var> be the distance between <var>box edge C</var> and <var>box edge D</var>.
+ <li><p>Let <var>scrolling box width</var> be the distance between <var>scrolling box edge C</var> and <var>scrolling box edge D</var>.
 
- <li><p>Let <var>position</var> be the scroll position <var>box</var> would have by following these steps:
+ <li><p>Let <var>position</var> be the scroll position <var>scrolling box</var> would have by following these steps:
 
   <ol>
-   <li><p>If the <i>align to top flag</i> is set align <var>element edge A</var> with <var>box edge A</var>.</p></li>
+   <li><p>If the <i>align to top flag</i> is set align <var>element edge A</var> with <var>scrolling box edge A</var>.</p></li>
 
-   <li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element edge B</var> with <var>box edge B</var>.</p></li>
+   <li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element edge B</var> with <var>scrolling box edge B</var>.</p></li>
 
    <li>
     <dl class=switch>
-     <dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>box edge C</var> and <var>box edge D</var>
+     <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><p>Do nothing.
 
-     <dt>If <var>element edge C</var> is outside <var>box edge C</var> and <var>element width</var> is less than <var>box width</var>
-     <dt>If <var>element edge D</var> is outside <var>box edge D</var> and <var>element width</var> is greater than <var>box width</var>
-     <dd><p>Align <var>element edge C</var> with <var>box edge C</var>.
+     <dt>If <var>element edge C</var> is outside <var>scrolling box edge C</var> and <var>element width</var> is less than <var>scrolling box width</var>
+     <dt>If <var>element edge D</var> is outside <var>scrolling box edge D</var> and <var>element width</var> is greater than <var>scrolling box width</var>
+     <dd><p>Align <var>element edge C</var> with <var>scrolling box edge C</var>.
 
-     <dt>If <var>element edge C</var> is outside <var>box edge C</var> and <var>element width</var> is greater than <var>box width</var>
-     <dt>If <var>element edge D</var> is outside <var>box edge D</var> and <var>element width</var> is less than <var>box width</var>
-     <dd><p>Align <var>element edge D</var> with <var>box edge D</var>.
+     <dt>If <var>element edge C</var> is outside <var>scrolling box edge C</var> and <var>element width</var> is greater than <var>scrolling box width</var>
+     <dt>If <var>element edge D</var> is outside <var>scrolling box edge D</var> and <var>element width</var> is less than <var>scrolling box width</var>
+     <dd><p>Align <var>element edge D</var> with <var>scrolling box edge D</var>.
     </dl>
   </ol>
 
- <li><p>If <var>position</var> is the same as <var>box</var>'s current scroll position, and <var>box</var> does not have an ongoing
+ <li><p>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
  <span title=concept-smooth-scroll>smooth scroll</span>, abort these steps.
 
  <li>
   <dl class=switch>
-   <dt>If <var>box</var> is associated with an element</dt>
+   <dt>If <var>scrolling box</var> is associated with an element</dt>
    <dd>
     <p>Let <var>associated element</var> be the element.
     <p>Let <var>task</var> be these steps:
@@ -1071,7 +1077,7 @@ <h3><code title>Element</code> Scrolling Members</h3>
     </ol>
    </dd>
 
-   <dt>If <var>box</var> is associated with a <span>viewport</span></dt>
+   <dt>If <var>scrolling box</var> is associated with a <span>viewport</span></dt>
    <dd>
     <p>Let <var>associated element</var> be the <code data-anolis-spec=dom>Document</code>'s root element, if there is one, or null otherwise.
     <p>Let <var>task</var> be these steps:
@@ -1083,7 +1089,7 @@ <h3><code title>Element</code> Scrolling Members</h3>
    </dd>
   </dl>
  </li>
- <li><p><span>Perform a scroll</span> of <var>box</var> to <var>position</var>, with the set of steps <var>task</var>,
+ <li><p><span>Perform a scroll</span> of <var>scrolling box</var> to <var>position</var>, with the set of steps <var>task</var>,
  <var>associated element</var> as the associated element and <var>behavior</var> as the scroll behavior.
 
 </ol>