Skip to content

Commit 20f9f2a

Browse files
author
Simon Pieters
committed
[cssom-view] Don't accept an object for scrollLeft/scrollTop; introduce scroll/scrollTo/scrollBy on Element. https://www.w3.org/Bugs/Public/show_bug.cgi?id=26294
1 parent 5cbe06b commit 20f9f2a

File tree

2 files changed

+181
-62
lines changed

2 files changed

+181
-62
lines changed

cssom-view/Overview.html

+94-32
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<h1>CSSOM View Module</h1>
1818

19-
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 18 September 2014</h2>
19+
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 25 September 2014</h2>
2020

2121
<dl>
2222

@@ -83,7 +83,7 @@ <h2 class="no-num no-toc" id="sotd">Status of This Document</h2>
8383
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
8484
index at http://www.w3.org/TR/.</a></em>
8585

86-
<p>This is the 18 September 2014 Editor's Draft of CSSOM View. Please send
86+
<p>This is the 25 September 2014 Editor's Draft of CSSOM View. Please send
8787
comments to
8888
<a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a>
8989
(<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
@@ -394,6 +394,11 @@ <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
394394
</dl>
395395
</table>
396396

397+
<p>The <dfn id="scrolling-area-origin" title="scrolling area origin">origin</dfn> of a <a href="#scrolling-area">scrolling area</a> is
398+
the origin of the <a href="#initial-containing-block">initial containing block</a> if the <a href="#scrolling-area">scrolling area</a> is a <a href="#viewport">viewport</a>,
399+
and otherwise the top left padding edge of the element when the element has its default scroll position.
400+
The x-coordinate increases rightwards, and the y-coordinate increases downwards.
401+
397402
<p>The <dfn id="beginning-edges">beginning edges</dfn> of a particular set of edges of a box or element are the following edges:
398403

399404
<dl class="switch">
@@ -741,10 +746,21 @@ <h2 id="extensions-to-the-window-interface"><span class="secno">5 </span>Extensi
741746
user agent must act as if the <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with the same arguments.</p>
742747

743748
<p>When the <dfn id="dom-window-scrollby" title="dom-Window-scrollBy"><code>scrollBy()</code></dfn> method is invoked, the
744-
user agent must act as if the <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with
745-
<var>x</var> plus <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code>
746-
as first argument and <var>y</var> plus
747-
<code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second argument.</p>
749+
user agent must run these steps:
750+
<ol>
751+
<li><p>If invoked with two arguments, follow these substeps:
752+
<ol>
753+
<li><p>Let <var>options</var> be null <a href="#converted-to-an-idl-value" title="converted to an IDL value">converted</a> to a <code><a href="#scrolltooptions">ScrollToOptions</a></code> dictionary. <a href="#refsWEBIDL">[WEBIDL]</a>
754+
<li><p>Let <var>x</var> and <var>y</var> be the arguments, respectively.
755+
<li><p><a href="#normalize-non-finite-values">Normalize non-finite values</a> for <var>x</var> and <var>y</var>.
756+
<li><p>Let the <code title="">left</code> dictionary member of <var>options</var> have the value <var>x</var>.
757+
<li><p>Let the <code title="">top</code> dictionary member of <var>options</var> have the value <var>y</var>.
758+
</ol>
759+
<li><p>Add the value of <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> to the <code title="">left</code> dictionary member.
760+
<li><p>Add the value of <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> to the <code title="">top</code> dictionary member.
761+
<li><p>Act as if the <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with
762+
<var>options</var> as the only argument.</p>
763+
</ol>
748764

749765
<p>The <dfn id="dom-window-screenx" title="dom-Window-screenX"><code>screenX</code></dfn> attribute must return the x-coordinate,
750766
relative to the origin of the screen of the output device, of the left of
@@ -1123,13 +1139,7 @@ <h3 id="the-caretposition-interface"><span class="secno">6.1 </span>The <code ti
11231139

11241140
<h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extensions to the <code title="">Element</code> Interface</h2>
11251141

1126-
<pre class="idl">dictionary <dfn id="scrolloptionshorizontal">ScrollOptionsHorizontal</dfn> : <a href="#scrolloptions">ScrollOptions</a> {
1127-
double x;
1128-
};
1129-
dictionary <dfn id="scrolloptionsvertical">ScrollOptionsVertical</dfn> : <a href="#scrolloptions">ScrollOptions</a> {
1130-
double y;
1131-
};
1132-
enum <dfn id="scrolllogicalposition">ScrollLogicalPosition</dfn> { "start", <!--"center", -->"end" };<!--
1142+
<pre class="idl">enum <dfn id="scrolllogicalposition">ScrollLogicalPosition</dfn> { "start", <!--"center", -->"end" };<!--
11331143
enum <dfn>ScrollVerticalPosition</dfn> { "top", "center", "bottom" };
11341144
enum <dfn>ScrollHorizontalPosition</dfn> { "left", "center", "right" };-->
11351145
dictionary <dfn id="scrollintoviewoptions">ScrollIntoViewOptions</dfn> : <a href="#scrolloptions">ScrollOptions</a> {
@@ -1144,8 +1154,14 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
11441154
<a href="#domrect">DOMRect</a> <a href="#dom-element-getboundingclientrect" title="dom-Element-getBoundingClientRect">getBoundingClientRect</a>();
11451155
void <a href="#dom-element-scrollintoview" title="dom-Element-scrollIntoView">scrollIntoView</a>();
11461156
void <a href="#dom-element-scrollintoview" title="dom-Element-scrollIntoView">scrollIntoView</a>((boolean or object) arg);
1147-
attribute (unrestricted double or <a href="#scrolloptionsvertical">ScrollOptionsVertical</a>) <a href="#dom-element-scrolltop" title="dom-Element-scrollTop">scrollTop</a>;
1148-
attribute (unrestricted double or <a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a>) <a href="#dom-element-scrollleft" title="dom-Element-scrollLeft">scrollLeft</a>;
1157+
void <a href="#dom-element-scroll" title="dom-Element-scroll">scroll</a>(optional <a href="#scrolltooptions">ScrollToOptions</a> options);
1158+
void <a href="#dom-element-scroll" title="dom-Element-scroll">scroll</a>(unrestricted double x, unrestricted double y);
1159+
void <a href="#dom-element-scrollto" title="dom-Element-scrollTo">scrollTo</a>(optional <a href="#scrolltooptions">ScrollToOptions</a> options);
1160+
void <a href="#dom-element-scrollto" title="dom-Element-scrollTo">scrollTo</a>(unrestricted double x, unrestricted double y);
1161+
void <a href="#dom-element-scrollby" title="dom-Element-scrollBy">scrollBy</a>(optional <a href="#scrolltooptions">ScrollToOptions</a> options);
1162+
void <a href="#dom-element-scrollby" title="dom-Element-scrollBy">scrollBy</a>(unrestricted double x, unrestricted double y);
1163+
attribute unrestricted double <a href="#dom-element-scrolltop" title="dom-Element-scrollTop">scrollTop</a>;
1164+
attribute unrestricted double <a href="#dom-element-scrollleft" title="dom-Element-scrollLeft">scrollLeft</a>;
11491165
readonly attribute double <a href="#dom-element-scrollwidth" title="dom-Element-scrollWidth">scrollWidth</a>;
11501166
readonly attribute double <a href="#dom-element-scrollheight" title="dom-Element-scrollHeight">scrollHeight</a>;
11511167
readonly attribute double <a href="#dom-element-clienttop" title="dom-Element-clientTop">clientTop</a>;
@@ -1220,6 +1236,59 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
12201236
<li><p>Optionally perform some other action that brings the element to the user's attention.
12211237
</ol>
12221238

1239+
<p>The <dfn id="dom-element-scroll" title="dom-Element-scroll"><code>scroll()</code></dfn> method must run these steps:</p>
1240+
<ol>
1241+
<li><p>If invoked with one argument, follow these substeps:
1242+
<ol>
1243+
<li><p>Let <var>options</var> be the argument.
1244+
<li><p>Let <var>x</var> be the value of the <code title="">left</code> dictionary member of <var>options</var>, if present, or the element's current scroll position on the x axis otherwise.
1245+
<li><p>Let <var>y</var> be the value of the <code title="">top</code> dictionary member of <var>options</var>, if present, or the element's current scroll position on the y axis otherwise.
1246+
</ol>
1247+
<li><p>If invoked with two arguments, follow these substeps:
1248+
<ol>
1249+
<li><p>Let <var>options</var> be null <a href="#converted-to-an-idl-value" title="converted to an IDL value">converted</a> to a <code><a href="#scrolltooptions">ScrollToOptions</a></code> dictionary. <a href="#refsWEBIDL">[WEBIDL]</a>
1250+
<li><p>Let <var>x</var> and <var>y</var> be the arguments, respectively.
1251+
<li><p><a href="#normalize-non-finite-values">Normalize non-finite values</a> for <var>x</var> and <var>y</var>.
1252+
<li><p>Let the <code title="">left</code> dictionary member of <var>options</var> have the value <var>x</var>.
1253+
<li><p>Let the <code title="">top</code> dictionary member of <var>options</var> have the value <var>y</var>.
1254+
</ol>
1255+
<li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in
1256+
<a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, terminate these steps.</li>
1257+
<li><p>If the element is the root element invoke
1258+
<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
1259+
argument and <var>y</var> as second argument, and terminate these steps.</li>
1260+
<li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
1261+
the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element
1262+
does not have an associated <a href="#scrolling-box">scrolling box</a>, invoke
1263+
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
1264+
<var>options</var> as the only argument, and
1265+
terminate these steps.</li>
1266+
<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
1267+
overflow, terminate these steps.</li>
1268+
<li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to
1269+
<var>x</var>,<var>y</var>, with the scroll behavior being the value of the <code title="">behavior</code> dictionary member of <var>options</var>.
1270+
</ol>
1271+
1272+
<p>When the <dfn id="dom-element-scrollto" title="dom-Element-scrollTo"><code>scrollTo()</code></dfn> method is invoked, the
1273+
user agent must act as if the <code title="dom-Element-scroll"><a href="#dom-element-scroll">scroll()</a></code> method was invoked with the same arguments.</p>
1274+
1275+
<p>When the <dfn id="dom-element-scrollby" title="dom-Element-scrollBy"><code>scrollBy()</code></dfn> method is invoked, the
1276+
user agent must run these steps:
1277+
<ol>
1278+
<li><p>If invoked with two arguments, follow these substeps:
1279+
<ol>
1280+
<li><p>Let <var>options</var> be null <a href="#converted-to-an-idl-value" title="converted to an IDL value">converted</a> to a <code><a href="#scrolltooptions">ScrollToOptions</a></code> dictionary. <a href="#refsWEBIDL">[WEBIDL]</a>
1281+
<li><p>Let <var>x</var> and <var>y</var> be the arguments, respectively.
1282+
<li><p><a href="#normalize-non-finite-values">Normalize non-finite values</a> for <var>x</var> and <var>y</var>.
1283+
<li><p>Let the <code title="">left</code> dictionary member of <var>options</var> have the value <var>x</var>.
1284+
<li><p>Let the <code title="">top</code> dictionary member of <var>options</var> have the value <var>y</var>.
1285+
</ol>
1286+
<li><p>Add the value of <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code> to the <code title="">left</code> dictionary member.
1287+
<li><p>Add the value of <code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code> to the <code title="">top</code> dictionary member.
1288+
<li><p>Act as if the <code title="dom-Element-scroll"><a href="#dom-element-scroll">scroll()</a></code> method was invoked with
1289+
<var>options</var> as the only argument.</p>
1290+
</ol>
1291+
12231292
<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>
12241293
<ol>
12251294
<li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in
@@ -1237,27 +1306,24 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
12371306
</ol>
12381307
<p>When setting the <code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code> attribute these steps must be run:</p>
12391308
<ol>
1240-
<li><p>If the given value is not a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, <a href="#normalize-non-finite-values">normalize non-finite values</a> for the given value.
1241-
<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.
1242-
<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.
1243-
Otherwise, let <var>y</var> be the given value.</li>
1309+
<li><p>Let <var>y</var> be the given value.
1310+
<li><p><a href="#normalize-non-finite-values">Normalize non-finite values</a> for <var>y</var>.
12441311
<li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in
12451312
<a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, terminate these steps.</li>
12461313
<li><p>If the element is the root element invoke
12471314
<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
1248-
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>
1315+
argument and <var>y</var> as second argument, and terminate these steps.</li>
12491316
<li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
12501317
the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element
12511318
does not have an associated <a href="#scrolling-box">scrolling box</a>, invoke
12521319
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
12531320
<code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> as first
1254-
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
1321+
argument and <var>y</var> as second argument, and
12551322
terminate these steps.</li>
12561323
<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
12571324
overflow, terminate these steps.</li>
12581325
<li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to
1259-
<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
1260-
member if the given value is a <code><a href="#scrolloptionsvertical">ScrollOptionsVertical</a></code> object, or <code title="">auto</code> otherwise.
1326+
<code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code>,<var>y</var>, with the scroll behavior being <code title="">auto</code>.
12611327
</ol>
12621328

12631329
<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>
@@ -1277,28 +1343,24 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
12771343
</ol>
12781344
<p>When setting the <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code> attribute these steps must be run:</p>
12791345
<ol>
1280-
<li><p>If the given value is not a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, <a href="#normalize-non-finite-values">normalize non-finite values</a> for the given value.
1281-
<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.
1282-
<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.
1283-
Otherwise, let <var>x</var> be the given value.</li>
1346+
<li><p>Let <var>x</var> be the given value.
1347+
<li><p><a href="#normalize-non-finite-values">Normalize non-finite values</a> for <var>x</var>.
12841348
<li><p>If the element is the root element and the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in
12851349
<a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, terminate these steps.</li>
12861350
<li><p>If the element is the root element invoke
12871351
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
1288-
<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>
1289-
object, the given value as the third argument.</li>
1352+
<var>x</var> as first argument and <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second argument, and terminate these steps.</li>
12901353
<li><p>If the element is <a href="#the-html-body-element">the HTML <code title="">body</code> element</a>,
12911354
the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element
12921355
does not have an associated <a href="#scrolling-box">scrolling box</a>, invoke
12931356
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
12941357
<var>x</var> as first argument and
1295-
<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
1358+
<code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second
12961359
argument, and terminate these steps.</li>
12971360
<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
12981361
overflow, terminate these steps.</li>
12991362
<li><p><a href="#scroll-an-element" title="Scroll an element">Scroll the element</a> to
1300-
<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
1301-
member if the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, or <code title="">auto</code> otherwise.
1363+
<var>x</var>,<code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code>, with the scroll behavior being <code title="">auto</code>.
13021364
</ol>
13031365

13041366
<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>

0 commit comments

Comments
 (0)