[cssom-view] Support upward scroll direction in scrolling APIs

Author: Simon Pieters

cssom-view/Overview.html

@@ -549,21 +549,28 @@ <h2 id="extensions-to-the-window-interface"><span class="secno">5 </span>Extensi
 steps must be run:</p>
 <ol>
  <li><p>If there is no <a href="#viewport">viewport</a>, abort these steps.
+ <li><p>Let <var title="">viewport width</var> be the width of the <a href="#viewport">viewport</a> excluding the width of the scroll bar, if any.
+ <li><p>Let <var title="">viewport height</var> be the height of the <a href="#viewport">viewport</a> excluding the height of the scroll bar, if any.
+ <li>
   <dl class="switch">
    <dt>If the <a href="#viewport">viewport</a> has rightward <a href="#overflow-directions" title="overflow directions">overflow direction</a>
    <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>,
-   <a href="#scrolling-area">scrolling area</a> width - <a href="#padding-edge">padding edge</a>
-   width)).</dd>
+   <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width - <var title="">viewport width</var>)).</dd>
    <dt>If the <a href="#viewport">viewport</a> has leftward <a href="#overflow-directions" title="overflow directions">overflow direction</a>
    <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>,
-   <a href="#padding-edge">padding edge</a> width - <a href="#scrolling-area">scrolling area</a>
+   <var title="">viewport width</var> - <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a>
    width)).</dd>
   </dl>
- </li>
- <!-- XXX support upward overflow -->
- <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
- <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height - <a href="#viewport">viewport</a>
- height excluding the size of a rendered scroll bar (if any))).</li>
+ <li>
+  <dl class="switch">
+   <dt>If the <a href="#viewport">viewport</a> has downward <a href="#overflow-directions" title="overflow directions">overflow direction</a>
+   <dd><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
+   <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height - <var title="">viewport height</var>)).</dd>
+   <dt>If the <a href="#viewport">viewport</a> has upward <a href="#overflow-directions" title="overflow directions">overflow direction</a>
+   <dd><p>Let <var title="">y</var> be min(0, max(<var title="">y</var>,
+   <var title="">viewport height</var> - <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a>
+   height)).</dd>
+  </dl>
  <li><p>Let <var title="">position</var> be the scroll position the <a href="#viewport">viewport</a> would have by aligning the x-coordinate <var title="">x</var> of the
  <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> with the left of the <a href="#viewport">viewport</a> and aligning the y-coordinate <var title="">y</var> of the
  <a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> with the top of the <a href="#viewport">viewport</a>.
@@ -1087,20 +1094,30 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
    <dt>If <var title="">box</var> has rightward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
 
    <dd><p>Let <var title="">x</var> be max(0, min(<var title="">x</var>,
-   <a href="#scrolling-area">scrolling area</a> width -
-   <a href="#padding-edge">padding edge</a> width)).</dd>
+   <var title="">element</var> <a href="#scrolling-area">scrolling area</a> width -
+   <var title="">element</var> <a href="#padding-edge">padding edge</a> width)).</dd>
 
    <dt>If <var title="">box</var> has leftward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
 
    <dd><p>Let <var title="">x</var> be min(0, max(<var title="">x</var>,
-   <a href="#padding-edge">padding edge</a> width -
-   <a href="#scrolling-area">scrolling area</a> width)).</dd>
+   <var title="">element</var> <a href="#padding-edge">padding edge</a> width -
+   <var title="">element</var> <a href="#scrolling-area">scrolling area</a> width)).</dd>
   </dl>
- </li>
 
- <!-- XXX support upward overflow -->
- <li><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
- <a href="#scrolling-area">scrolling area</a> height - <a href="#padding-edge">padding edge</a> height)).</li>
+ <li>
+  <dl class="switch">
+   <dt>If <var title="">box</var> has downward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
+
+   <dd><p>Let <var title="">y</var> be max(0, min(<var title="">y</var>,
+   <var title="">element</var> <a href="#scrolling-area">scrolling area</a> height -
+   <var title="">element</var> <a href="#padding-edge">padding edge</a> height)).</dd>
+
+   <dt>If <var title="">box</var> has upward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
+
+   <dd><p>Let <var title="">y</var> be min(0, max(<var title="">y</var>,
+   <var title="">element</var> <a href="#padding-edge">padding edge</a> height -
+   <var title="">element</var> <a href="#scrolling-area">scrolling area</a> height)).</dd>
+  </dl>
 
  <li><p>Let <var title="">position</var> be the scroll position <var title="">box</var> would have by aligning <a href="#scrolling-area">scrolling area</a> x-coordinate
  <var title="">x</var> with the left of <var title="">box</var> and aligning <a href="#scrolling-area">scrolling area</a> y-coordinate <var title="">y</var> with

cssom-view/Overview.src.html

@@ -517,21 +517,28 @@ <h2>Extensions to the <code title>Window</code> Interface</h2>
 steps must be run:</p>
 <ol>
  <li><p>If there is no <span>viewport</span>, abort these steps.
+ <li><p>Let <var title>viewport width</var> be the width of the <span>viewport</span> excluding the width of the scroll bar, if any.
+ <li><p>Let <var title>viewport height</var> be the height of the <span>viewport</span> excluding the height of the scroll bar, if any.
+ <li>
   <dl class=switch>
    <dt>If the <span>viewport</span> has rightward <span title="overflow directions">overflow direction</span>
    <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>,
-   <span>scrolling area</span> width - <span>padding edge</span>
-   width)).</p></dd>
+   <span>viewport</span> <span>scrolling area</span> width - <var title>viewport width</var>)).</p></dd>
    <dt>If the <span>viewport</span> has leftward <span title="overflow directions">overflow direction</span>
    <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>,
-   <span>padding edge</span> width - <span>scrolling area</span>
+   <var title>viewport width</var> - <span>viewport</span> <span>scrolling area</span>
    width)).</p></dd>
   </dl>
- </li>
- <!-- XXX support upward overflow -->
- <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>,
- <span>viewport</span> <span>scrolling area</span> height - <span>viewport</span>
- height excluding the size of a rendered scroll bar (if any))).</p></li>
+ <li>
+  <dl class=switch>
+   <dt>If the <span>viewport</span> has downward <span title="overflow directions">overflow direction</span>
+   <dd><p>Let <var title>y</var> be max(0, min(<var title>y</var>,
+   <span>viewport</span> <span>scrolling area</span> height - <var title>viewport height</var>)).</p></dd>
+   <dt>If the <span>viewport</span> has upward <span title="overflow directions">overflow direction</span>
+   <dd><p>Let <var title>y</var> be min(0, max(<var title>y</var>,
+   <var title>viewport height</var> - <span>viewport</span> <span>scrolling area</span>
+   height)).</p></dd>
+  </dl>
  <li><p>Let <var title>position</var> be the scroll position the <span>viewport</span> would have by aligning the x-coordinate <var title>x</var> of the
  <span>viewport</span> <span>scrolling area</span> with the left of the <span>viewport</span> and aligning the y-coordinate <var title>y</var> of the
  <span>viewport</span> <span>scrolling area</span> with the top of the <span>viewport</span>.
@@ -1053,20 +1060,30 @@ <h3><code title>Element</code> Scrolling Members</h3>
    <dt>If <var title>box</var> has rightward <span title="overflow directions">overflow direction</span></dt>
 
    <dd><p>Let <var title>x</var> be max(0, min(<var title>x</var>,
-   <span>scrolling area</span> width -
-   <span>padding edge</span> width)).</p></dd>
+   <var title>element</var> <span>scrolling area</span> width -
+   <var title>element</var> <span>padding edge</span> width)).</p></dd>
 
    <dt>If <var title>box</var> has leftward <span title="overflow directions">overflow direction</span></dt>
 
    <dd><p>Let <var title>x</var> be min(0, max(<var title>x</var>,
-   <span>padding edge</span> width -
-   <span>scrolling area</span> width)).</p></dd>
+   <var title>element</var> <span>padding edge</span> width -
+   <var title>element</var> <span>scrolling area</span> width)).</p></dd>
   </dl>
- </li>
 
- <!-- XXX support upward overflow -->
- <li><p>Let <var title>y</var> be max(0, min(<var title>y</var>,
- <span>scrolling area</span> height - <span>padding edge</span> height)).</p></li>
+ <li>
+  <dl class=switch>
+   <dt>If <var title>box</var> has downward <span title="overflow directions">overflow direction</span></dt>
+
+   <dd><p>Let <var title>y</var> be max(0, min(<var title>y</var>,
+   <var title>element</var> <span>scrolling area</span> height -
+   <var title>element</var> <span>padding edge</span> height)).</p></dd>
+
+   <dt>If <var title>box</var> has upward <span title="overflow directions">overflow direction</span></dt>
+
+   <dd><p>Let <var title>y</var> be min(0, max(<var title>y</var>,
+   <var title>element</var> <span>padding edge</span> height -
+   <var title>element</var> <span>scrolling area</span> height)).</p></dd>
+  </dl>
 
  <li><p>Let <var title>position</var> be the scroll position <var title>box</var> would have by aligning <span>scrolling area</span> x-coordinate
  <var title>x</var> with the left of <var title>box</var> and aligning <span>scrolling area</span> y-coordinate <var title>y</var> with