[cssom-view] Make 'scroll an element into view' algorithm be aware of vertical writing modes

Author: Simon Pieters

cssom-view/Overview.html

@@ -412,6 +412,19 @@ <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
  <dd><p>The bottom and left edges.
 </dl>
 
+<p>The <dfn id="ending-edges">ending edges</dfn> of a particular set of edges of a box or element are the following edges:
+
+<dl class="switch">
+ <dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and downward
+ <dd><p>The bottom and right edges.
+ <dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and downward
+ <dd><p>The bottom and left edges.
+ <dt>If the <a href="#overflow-directions">overflow directions</a> are leftward and upward
+ <dd><p>The top and left edges.
+ <dt>If the <a href="#overflow-directions">overflow directions</a> are rightward and upward
+ <dd><p>The top and right edges.
+</dl>
+
 <p>The term <dfn id="css-layout-box">CSS layout box</dfn> refers to the same term in CSS. For the purpose
 of the requirements in this specification, elements that have a computed value of the
 'display' property that is 'table-column' or
@@ -1029,32 +1042,33 @@ <h3 id="the-getclientrects()-and-getboundingclientrect()-methods"><span class="s
 
 <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title="">Element</code> Scrolling Members</h3>
 
-<p>To <dfn id="scroll-an-element-into-view">scroll an element into view</dfn>, 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 <a href="#viewport">viewport</a> that establishes a scrolling box
-<var>box</var>, in order of innermost to outermost scrolling box:</p>
+<p>To <dfn id="scroll-an-element-into-view">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 <a href="#viewport">viewport</a> that establishes
+a scrolling box <var>box</var>, in order of innermost to outermost scrolling box:</p>
 
 <ol>
  <li><p>If the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> associated
- with the element to be
- scrolled into view is not <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#same-origin">same origin</a> with the
+ with <var>element</var> is not <a class="external" data-anolis-spec="html" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#same-origin">same origin</a> with the
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> associated with the element or
  <a href="#viewport">viewport</a> associated with <var>box</var>, terminate these
  steps.</li>
 
  <li><p>Let <var>position</var> be the scroll position <var>box</var> would have by following these steps:
 
   <ol>
-   <li><p>If the <i>align to top flag</i> is set align the top of
-   the border box of the element to be scrolled into view with the top of
-   <var>box</var>.</li>
+   <li><p>If the <i>align to top flag</i> is set align <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#block-flow-direction">block
+   flow direction</a> with the <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#block-flow-direction">block flow direction</a> of <var>box</var>.</li>
 
-   <li><p>Otherwise, if the <i>align to top flag</i> is not set
+   <li><p>Otherwise, the <i>align to top flag</i> is not set;
    align the bottom of the border box of the element to be scrolled into
    view with the bottom of <var>box</var>.</li>
 
-   <li><p>Align the left of the border box of the element to be scrolled
-   into view with the left of <var>box</var>.</li>
-   <!-- RTL is not special cased in implementations?! -->
+   <li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element</var>'s border box <a href="#ending-edges" title="ending edges">ending edge</a> in the
+   <a href="#block-flow-direction">block flow direction</a> with the <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#block-flow-direction">block flow direction</a> of <var>box</var>.</li>
+
+   <li><p>Align <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> with the 
+   <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> of <var>box</var>.
+   <!-- This is wrong. It shouldn't scroll in the inline base direction if the element is visible. It should scroll just enough to make it fully visible. -->
   </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
@@ -1064,19 +1078,17 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
   <dl class="switch">
    <dt>If <var>box</var> is associated with an element</dt>
    <dd>
-    <p>Let <var>element</var> be the element.
+    <p>Let <var>associated element</var> be the element.
     <p>Let <var>task</var> be these steps:
     <ol>
      <li><p><a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a>
-     named <code title="">scroll</code> at the element
-     associated <var>box</var>.</p>
+     named <code title="">scroll</code> at <var>associated element</var>.</p>
     </ol>
    </dd>
 
    <dt>If <var>box</var> is associated with a <a href="#viewport">viewport</a></dt>
    <dd>
-    <p>Let <var>element</var> be the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>'s root element as the associated element, if there is one, or
-    null otherwise.
+    <p>Let <var>associated element</var> be the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>'s root element, if there is one, or null otherwise.
     <p>Let <var>task</var> be these steps:
     <ol>
      <li><p><a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a>
@@ -1087,15 +1099,14 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
   </dl>
  </li>
  <li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>box</var> to <var>position</var>, with the set of steps <var>task</var>,
- <var>element</var> as the associated element and <var>behavior</var> as the scroll behavior.
+ <var>associated element</var> as the associated element and <var>behavior</var> as the scroll behavior.
 
 </ol>
 
-<p>To <dfn id="scroll-an-element">scroll an element</dfn> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is <code title="">auto</code> if
-omitted) means to:</p>
+<p>To <dfn id="scroll-an-element">scroll an element</dfn> <var>element</var> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is
+<code title="">auto</code> if omitted) means to:</p>
 
 <ol>
- <li><p>Let <var>element</var> be the element.
  <li><p>Let <var>box</var> be <var>element</var>'s associated scrolling box.
  <li>
   <dl class="switch">

cssom-view/Overview.src.html

@@ -372,6 +372,19 @@ <h2>Terminology</h2>
  <dd><p>The bottom and left edges.
 </dl>
 
+<p>The <dfn>ending edges</dfn> of a particular set of edges of a box or element are the following edges:
+
+<dl class=switch>
+ <dt>If the <span>overflow directions</span> are rightward and downward
+ <dd><p>The bottom and right edges.
+ <dt>If the <span>overflow directions</span> are leftward and downward
+ <dd><p>The bottom and left edges.
+ <dt>If the <span>overflow directions</span> are leftward and upward
+ <dd><p>The top and left edges.
+ <dt>If the <span>overflow directions</span> are rightward and upward
+ <dd><p>The top and right edges.
+</dl>
+
 <p>The term <dfn>CSS layout box</dfn> refers to the same term in CSS. For the purpose
 of the requirements in this specification, elements that have a computed value of the
 'display' property that is 'table-column' or
@@ -987,32 +1000,33 @@ <h3>The <code title>getClientRects()</code> and
 
 <h3><code title>Element</code> Scrolling Members</h3>
 
-<p>To <dfn>scroll an element into view</dfn>, 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>
+<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>
 
 <ol>
  <li><p>If the <code data-anolis-spec=dom>Document</code> associated
- with the element to be
- scrolled into view is not <span data-anolis-spec=html>same origin</span> with the
+ with <var>element</var> is not <span data-anolis-spec=html>same origin</span> with the
  <code data-anolis-spec=dom>Document</code> associated with the element or
  <span>viewport</span> associated with <var>box</var>, terminate these
  steps.</p></li>
 
  <li><p>Let <var>position</var> be the scroll position <var>box</var> would have by following these steps:
 
   <ol>
-   <li><p>If the <i>align to top flag</i> is set align the top of
-   the border box of the element to be scrolled into view with the top of
-   <var>box</var>.</p></li>
+   <li><p>If the <i>align to top flag</i> is set align <var>element</var>'s border box <span title="beginning edges">beginning edge</span> in the <span>block
+   flow direction</span> with the <span title="beginning edges">beginning edge</span> in the <span>block flow direction</span> of <var>box</var>.</p></li>
 
-   <li><p>Otherwise, if the <i>align to top flag</i> is not set
+   <li><p>Otherwise, the <i>align to top flag</i> is not set;
    align the bottom of the border box of the element to be scrolled into
    view with the bottom of <var>box</var>.</p></li>
 
-   <li><p>Align the left of the border box of the element to be scrolled
-   into view with the left of <var>box</var>.</p></li>
-   <!-- RTL is not special cased in implementations?! -->
+   <li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element</var>'s border box <span title="ending edges">ending edge</span> in the
+   <span>block flow direction</span> with the <span title="ending edges">ending edge</span> in the <span>block flow direction</span> of <var>box</var>.</p></li>
+
+   <li><p>Align <var>element</var>'s border box <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> with the 
+   <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> of <var>box</var>.
+   <!-- This is wrong. It shouldn't scroll in the inline base direction if the element is visible. It should scroll just enough to make it fully visible. -->
   </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
@@ -1022,19 +1036,17 @@ <h3><code title>Element</code> Scrolling Members</h3>
   <dl class=switch>
    <dt>If <var>box</var> is associated with an element</dt>
    <dd>
-    <p>Let <var>element</var> be the element.
+    <p>Let <var>associated element</var> be the element.
     <p>Let <var>task</var> be these steps:
     <ol>
      <li><p><span data-anolis-spec=dom title=concept-event-fire>Fire an event</span>
-     named <code title>scroll</code> at the element
-     associated <var>box</var>.</p>
+     named <code title>scroll</code> at <var>associated element</var>.</p>
     </ol>
    </dd>
 
    <dt>If <var>box</var> is associated with a <span>viewport</span></dt>
    <dd>
-    <p>Let <var>element</var> be the <code data-anolis-spec=dom>Document</code>'s root element as the associated element, if there is one, or
-    null otherwise.
+    <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:
     <ol>
      <li><p><span data-anolis-spec=dom title=concept-event-fire>Fire an event</span>
@@ -1045,15 +1057,14 @@ <h3><code title>Element</code> Scrolling Members</h3>
   </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>,
- <var>element</var> as the associated element and <var>behavior</var> as the scroll behavior.
+ <var>associated element</var> as the associated element and <var>behavior</var> as the scroll behavior.
 
 </ol>
 
-<p>To <dfn>scroll an element</dfn> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is <code title>auto</code> if
-omitted) means to:</p>
+<p>To <dfn>scroll an element</dfn> <var>element</var> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is
+<code title>auto</code> if omitted) means to:</p>
 
 <ol>
- <li><p>Let <var>element</var> be the element.
  <li><p>Let <var>box</var> be <var>element</var>'s associated scrolling box.
  <li>
   <dl class=switch>