[cssom-view] Make scrollTop/Left/Width/Height make more sense. Also make scrollable body work properly in quirks mode. https://www.w3.org/Bugs/Public/show_bug.cgi?id=23603

Author: Simon Pieters

cssom-view/Overview.html

@@ -16,7 +16,7 @@
 
  <h1>CSSOM View Module</h1>
 
- <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 21 October 2013</h2>
+ <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 23 October 2013</h2>
 
  <dl>
 
@@ -83,7 +83,7 @@ <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
 can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
 index at http://www.w3.org/TR/.</a></em>
 
-<p>This is the 21 October 2013 Editor's Draft of CSSOM View. Please send
+<p>This is the 23 October 2013 Editor's Draft of CSSOM View. Please send
 comments to
 <a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a>
 (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
@@ -1083,16 +1083,17 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
  <li><p>Optionally perform some other action that brings the element to the user's attention.
 </ol>
 
-<p>The <dfn id="dom-element-scrolltop" title="dom-Element-scrollTop"><code>scrollTop</code></dfn> attribute must return the result of running these steps:</p>
+<p>The <dfn id="dom-element-scrolltop" title="dom-Element-scrollTop"><code>scrollTop</code></dfn> attribute, on getting, must return the result of running these steps:</p>
 <ol>
- <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> or the
- element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
- <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> return zero and terminate these steps.</li>
+ <li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
+ <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, return zero and terminate these steps.</li>
  <li><p>If the element is the root element return the value of
  <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li>
  <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
- the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, return the value of
+ the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element does not have
+ an associated <a href="#scrolling-box">scrolling box</a>, return the value of
  <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code>.</li>
+ <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, return zero and terminate these steps.</li>
  <li><p>Return the y-coordinate of the <a href="#scrolling-area">scrolling area</a> at the
  alignment point with the top of the <a href="#padding-edge">padding edge</a> of the
  element.</li>
@@ -1102,34 +1103,36 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
  <li><p>If the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, and the <code title="">y</code> dictionary member is not present, abort these steps.
  <li><p>If the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, let <var>y</var> be the value of the <code title="">y</code> dictionary member.
  Otherwise, let <var>y</var> be the given value.</li>
- <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the
- element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
- <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, or the element has no associated <a href="#scrolling-box">scrolling box</a>, or the element has no
- overflow, terminate these steps.</li>
+ <li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
+ <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, terminate these steps.</li>
  <li><p>If the element is the root element invoke
  <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> as first
  argument and <var>y</var> as second, and, if the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, the given value as the third argument.</li>
  <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
  the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element
- does not have any vertical overflow, invoke
+ does not have an associated <a href="#scrolling-box">scrolling box</a>, invoke
  <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
  <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> as first
- argument and <var>y</var> as second, and, if the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, the given value as the third argument.</li>
+ argument and <var>y</var> as second, and, if the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, the given value as the third argument, and
+ terminate these steps.</li>
+ <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the element has no associated <a href="#scrolling-box">scrolling box</a>, or the element has no
+ overflow, terminate these steps.</li>
  <li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to
  <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code>,<var>y</var>, with the scroll behavior being the value of the <code title="">behavior</code> dictionary
  member if the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, or <code title="">auto</code> otherwise.
 </ol>
 
-<p>The <dfn id="dom-element-scrollleft" title="dom-Element-scrollLeft"><code>scrollLeft</code></dfn> attribute must return the result of running these steps:</p>
+<p>The <dfn id="dom-element-scrollleft" title="dom-Element-scrollLeft"><code>scrollLeft</code></dfn> attribute, on getting, must return the result of running these steps:</p>
 <ol>
- <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> or the
- element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
- <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> return zero and terminate these steps.</li>
+ <li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
+ <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, return zero and terminate these steps.</li>
  <li><p>If the element is the root element return the value of
  <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li>
  <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
- the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, return the value of
+ the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element does not have
+ an associated <a href="#scrolling-box">scrolling box</a>, return the value of
  <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>.</li>
+ <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, return zero and terminate these steps.</li>
  <li><p>Return the x-coordinate of the <a href="#scrolling-area">scrolling area</a> at the
  alignment point with the left of the <a href="#padding-edge">padding edge</a> of the
  element.</li>
@@ -1139,57 +1142,55 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
  <li><p>If the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, and the <code title="">x</code> dictionary member is not present, abort these steps.
  <li><p>If the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, let <var>x</var> be the value of the <code title="">x</code> dictionary member.
  Otherwise, let <var>x</var> be the given value.</li>
- <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the
- element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
- <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, or the element has no associated <a href="#scrolling-box">scrolling box</a>, or the element has no
- overflow, terminate these steps.</li>
+ <li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
+ <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, terminate these steps.</li>
  <li><p>If the element is the root element invoke
  <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
  <var>x</var> as first argument and <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second, and, if the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code>
  object, the given value as the third argument.</li>
  <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
  the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element
- does not have any vertical overflow, invoke
+ does not have an associated <a href="#scrolling-box">scrolling box</a>, invoke
  <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
  <var>x</var> as first argument and
  <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second, and, if the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, the given value as the third
- argument.</li>
+ argument, and terminate these steps.</li>
+ <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the element has no associated <a href="#scrolling-box">scrolling box</a>, or the element has no
+ overflow, terminate these steps.</li>
  <li><p><a href="#scroll-an-element" title="Scroll an element">Scroll the element</a> to
  <var>x</var>,<code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code>, with the scroll behavior being the value of the <code title="">behavior</code> dictionary
  member if the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, or <code title="">auto</code> otherwise.
 </ol>
 
 <p>The <dfn id="dom-element-scrollwidth" title="dom-Element-scrollWidth"><code>scrollWidth</code></dfn> attribute must return the result of running these steps:</p>
 <ol>
- <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> return
- zero and terminate these steps.</li>
  <li><p>Let <var>viewport width</var> be the width of the <a href="#viewport">viewport</a> excluding the width of the scroll bar, if any, or zero if there is no
  <a href="#viewport">viewport</a>.
  <li><p>If the element is the root element and the
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is not in
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
  return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width, <var>viewport width</var>).</li>
- <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>
- and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
- <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
+ <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>, the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
+ <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> and the element has no associated <a href="#scrolling-box">scrolling box</a>,
  return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> width, <var>viewport width</var>).</li>
+ <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> return
+ zero and terminate these steps.</li>
  <li><p>Return the width of the element's <a href="#scrolling-area">scrolling area</a>.</li>
 </ol>
 
 <p>The <dfn id="dom-element-scrollheight" title="dom-Element-scrollHeight"><code>scrollHeight</code></dfn> attribute must return the result of running these steps:</p>
 <ol>
- <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> return
- zero and terminate these steps.</li>
  <li><p>Let <var>viewport height</var> be the height of the <a href="#viewport">viewport</a> excluding the height of the scroll bar, if any, or zero if there is no
  <a href="#viewport">viewport</a>.
  <li><p>If the element is the root element and the
  <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is not in
  <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
  return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height, <var>viewport height</var>).</li>
- <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>
- and the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
- <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>
+ <li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>, the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in
+ <a class="external" data-anolis-spec="dom" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a> and the element has no associated <a href="#scrolling-box">scrolling box</a>,
  return max(<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> height, <var>viewport height</var>).</li>
+ <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> return
+ zero and terminate these steps.</li>
  <li><p>Return the height of the element's <a href="#scrolling-area">scrolling area</a>.</li>
 </ol>