changeset
[cssom-view] Make scroll() et al be able to request smooth or instant scrolling
Fri, 24 May 2013 15:44:29 +0200
- author
- Simon Pieters <simonp@opera.com>
- date
- Fri, 24 May 2013 15:44:29 +0200
- changeset 8250
- 1fce354eb139
- parent 8249
- 009ff568218a
- child 8251
- 5f7a2fa81c0b
[cssom-view] Make scroll() et al be able to request smooth or instant scrolling
| cssom-view/Overview.html | file | annotate | diff | comparison | revisions | |
| cssom-view/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/cssom-view/Overview.html Fri May 24 14:53:56 2013 +0200 1.2 +++ b/cssom-view/Overview.html Fri May 24 15:44:29 2013 +0200 1.3 @@ -272,12 +272,17 @@ 1.4 <h3 id="scrolling"><span class="secno">4.1 </span>Scrolling</h3> 1.5 1.6 <p>When a user agent is to <dfn id="perform-a-scroll">perform a scroll</dfn> of a scrolling box <var title="">box</var>, to a given position <var title="">position</var>, with a set of 1.7 -steps <var title="">task</var>, and an associated element <var title="">element</var> the following steps must be run: 1.8 +steps <var title="">task</var>, an associated element <var title="">element</var> and a scroll behavior <var title="">behavior</var>, the following steps must be run: 1.9 1.10 <ol> 1.11 <li><p><a href="#concept-smooth-scroll-aborted" title="concept-smooth-scroll-aborted">Abort</a> any ongoing <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a> for <var title="">box</var>. 1.12 - <li><p>If <var title="">element</var> is not null and its computed value of the '<code><a href="#scroll-behavior">scroll-behavior</a></code>' property is 1.13 - '<code title="scroll-behavior-smooth"><a href="#scroll-behavior-smooth">smooth</a></code>', and the user agent honors the '<code><a href="#scroll-behavior">scroll-behavior</a></code>' property, then follow these substeps: 1.14 + <li><p>If the user agent honors the '<code><a href="#scroll-behavior">scroll-behavior</a></code>' property and one of the following are true: 1.15 + <ul> 1.16 + <li><p><var title="">behavior</var> is <code title="">auto</code> and <var title="">element</var> is not null and its computed value of the '<code><a href="#scroll-behavior">scroll-behavior</a></code>' 1.17 + property is '<code title="scroll-behavior-smooth"><a href="#scroll-behavior-smooth">smooth</a></code>' 1.18 + <li><p><var title="">behavior</var> is <code title="">smooth</code> 1.19 + </ul> 1.20 + <p>...then follow these substeps: 1.21 <ol> 1.22 <li><p>Perform a <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a> of <var title="">box</var> to <var title="">position</var>. 1.23 <li><p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#queue-a-task">Queue a task</a> to run <var title="">task</var>, unless a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#concept-task" title="concept-task">task</a> to 1.24 @@ -305,7 +310,15 @@ 1.25 1.26 <h2 id="extensions-to-the-window-interface"><span class="secno">5 </span>Extensions to the <code title="">Window</code> Interface</h2> 1.27 1.28 -<pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a> { 1.29 +<pre class="idl">enum <dfn id="scrollbehavior">ScrollBehavior</dfn> { "auto", "instant", "smooth" }; 1.30 + 1.31 +dictionary <dfn id="scrolloptions">ScrollOptions</dfn> { 1.32 + double x; 1.33 + double y; 1.34 + <a href="#scrollbehavior">ScrollBehavior</a> behavior = "auto"; 1.35 +}; 1.36 + 1.37 +partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window">Window</a> { 1.38 <a href="#mediaquerylist">MediaQueryList</a> <a href="#dom-window-matchmedia" title="dom-Window-matchMedia">matchMedia</a>(DOMString query); 1.39 readonly attribute <a href="#screen">Screen</a> <a href="#dom-window-screen" title="dom-Window-screen">screen</a>; 1.40 1.41 @@ -318,9 +331,9 @@ 1.42 readonly attribute double <a href="#dom-window-pagexoffset" title="dom-Window-pageXOffset">pageXOffset</a>; 1.43 readonly attribute double <a href="#dom-window-scrolly" title="dom-Window-scrollY">scrollY</a>; 1.44 readonly attribute double p<a href="#dom-window-pageyoffset" title="dom-Window-pageYOffset">pageYOffset</a>; 1.45 - void <a href="#dom-window-scroll" title="dom-Window-scroll">scroll(double x, double y)</a>; 1.46 - void <a href="#dom-window-scrollto" title="dom-Window-scrollTo">scrollTo(double x, double y)</a>; 1.47 - void <a href="#dom-window-scrollby" title="dom-Window-scrollBy">scrollBy(double x, double y)</a>; 1.48 + void <a href="#dom-window-scroll" title="dom-Window-scroll">scroll</a>(double x, double y, optional <a href="#scrolloptions">ScrollOptions</a> options); 1.49 + void <a href="#dom-window-scrollto" title="dom-Window-scrollTo">scrollTo</a>(double x, double y, optional <a href="#scrolloptions">ScrollOptions</a> options); 1.50 + void <a href="#dom-window-scrollby" title="dom-Window-scrollBy">scrollBy</a>(double x, double y, optional <a href="#scrolloptions">ScrollOptions</a> options); 1.51 1.52 // client 1.53 readonly attribute double <a href="#dom-window-screenx" title="dom-Window-screenX">screenX</a>; 1.54 @@ -368,7 +381,7 @@ 1.55 1.56 <p>The <dfn id="dom-window-pageyoffset" title="dom-Window-pageYOffset"><code>pageYOffset</code></dfn> attribute must return the value returned by the <code>scrollY</code> attribute.</p> 1.57 1.58 -<p>When the <dfn id="dom-window-scroll" title="dom-Window-scroll"><code>scroll(<var title="">x</var>, <var title="">y</var>)</code></dfn> method is invoked these steps must be run:</p> 1.59 +<p>When the <dfn id="dom-window-scroll" title="dom-Window-scroll"><code>scroll(<var title="">x</var>, <var title="">y</var>, <var title="">options</var>)</code></dfn> method is invoked these steps must be run:</p> 1.60 <ol> 1.61 <li><p>If there is no <a href="#viewport">viewport</a>, abort these steps. 1.62 <dl> 1.63 @@ -397,13 +410,13 @@ 1.64 <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> object. 1.65 </ol> 1.66 <li><p><a href="#perform-a-scroll">Perform a scroll</a> of the <a href="#viewport">viewport</a> to <var title="">position</var>, with the set of steps <var title="">task</var>, and the 1.67 - <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>'s root element as the associated element, if there is one, or <code>null</code> otherwise. 1.68 + <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code>'s root element as the associated element, if there is one, or <code>null</code> otherwise, and the scroll behavior being the value of the <code title="">behavior</code> dictionary member of <var title="">options</var>. 1.69 </ol> 1.70 1.71 -<p>When the <dfn id="dom-window-scrollto" title="dom-Window-scrollTo"><code>scrollTo(<var title="">x</var>, <var title="">y</var>)</code></dfn> method is invoked, the user agent must act as if 1.72 +<p>When the <dfn id="dom-window-scrollto" title="dom-Window-scrollTo"><code>scrollTo(<var title="">x</var>, <var title="">y</var>, <var title="">options</var>)</code></dfn> method is invoked, the user agent must act as if 1.73 the <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with the same arguments.</p> 1.74 1.75 -<p>When the <dfn id="dom-window-scrollby" title="dom-Window-scrollBy"><code>scrollBy(<var title="">x</var>, <var title="">y</var>)</code></dfn> method is invoked, the user agent must act as if 1.76 +<p>When the <dfn id="dom-window-scrollby" title="dom-Window-scrollBy"><code>scrollBy(<var title="">x</var>, <var title="">y</var>, <var title="">options</var>)</code></dfn> method is invoked, the user agent must act as if 1.77 the <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> method was invoked with 1.78 <var title="">x</var> plus <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> 1.79 as first argument and <var title="">y</var> plus 1.80 @@ -604,9 +617,9 @@ 1.81 <pre class="idl">partial interface <a class="external" href="http://dom.spec.whatwg.org/#element">Element</a> { 1.82 <a href="#clientrectlist">ClientRectList</a> <a href="#dom-element-getclientrects" title="dom-Element-getClientRects">getClientRects</a>(); 1.83 <a href="#clientrect">ClientRect</a> <a href="#dom-element-getboundingclientrect" title="dom-Element-getBoundingClientRect">getBoundingClientRect</a>(); 1.84 - void <span title="dom-Element-scrollIntoView">scrollIntoView</span>(optional boolean top); 1.85 - attribute double <a href="#dom-element-scrolltop" title="dom-Element-scrollTop">scrollTop</a>; 1.86 - attribute double <a href="#dom-element-scrollleft" title="dom-Element-scrollLeft">scrollLeft</a>; 1.87 + void <span title="dom-Element-scrollIntoView">scrollIntoView</span>(optional boolean top, optional <a href="#scrolloptions">ScrollOptions</a> options); 1.88 + attribute (double or <a href="#scrolloptions">ScrollOptions</a>) <a href="#dom-element-scrolltop" title="dom-Element-scrollTop">scrollTop</a>; 1.89 + attribute (double or <a href="#scrolloptions">ScrollOptions</a>) <a href="#dom-element-scrollleft" title="dom-Element-scrollLeft">scrollLeft</a>; 1.90 readonly attribute double <a href="#dom-element-scrollwidth" title="dom-Element-scrollWidth">scrollWidth</a>; 1.91 readonly attribute double <a href="#dom-element-scrollheight" title="dom-Element-scrollHeight">scrollHeight</a>; 1.92 readonly attribute double <a href="#dom-element-clienttop" title="dom-Element-clientTop">clientTop</a>; 1.93 @@ -671,11 +684,12 @@ 1.94 var exampleHeight = example.height;</code></pre> 1.95 </div> 1.96 1.97 -<p>The <dfn id="dom-element-scrollintroview" title="dom-Element-scrollIntroView"><code>scrollIntoView(<var title="">top</var>)</code></dfn> method must run these steps:</p> 1.98 +<p>The <dfn id="dom-element-scrollintroview" title="dom-Element-scrollIntroView"><code>scrollIntoView(<var title="">top</var>, <var title="">options</var>)</code></dfn> method must run these steps:</p> 1.99 <ol> 1.100 <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a> terminate these steps.</li> 1.101 <li><p><a href="#scroll-an-element-into-view" title="scroll an element into view">Scroll the element into view</a> with the 1.102 - <i title="">align to top flag</i> set if <var title="">top</var> is true or omitted.</li> 1.103 + <i title="">align to top flag</i> set if <var title="">top</var> is true or omitted, and the scroll behavior being the value of the <code title="">behavior</code> 1.104 + dictionary member of <var title="">options</var>.</li> 1.105 </ol> 1.106 1.107 <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> 1.108 @@ -695,22 +709,25 @@ 1.109 </ol> 1.110 <p>When setting the <code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code> attribute these steps must be run:</p> 1.111 <ol> 1.112 - <li><p>Let <var title="">y</var> be the given value.</li> 1.113 + <li><p>If the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, and the <code title="">y</code> dictionary member is not present, abort these steps. 1.114 + <li><p>If the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, let <var title="">y</var> be the value of the <code title="">y</code> dictionary member. Otherwise, 1.115 + let <var title="">y</var> be the given value.</li> 1.116 <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the 1.117 element is the root element and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in 1.118 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, or the element has no overflow, terminate these 1.119 steps.</li> 1.120 <li><p>If the element is the root element invoke 1.121 <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with zero as first 1.122 - argument and <var title="">y</var> as second.</li> 1.123 + argument and <var title="">y</var> as second, and, if the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, the given value as the third argument.</li> 1.124 <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, 1.125 the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element 1.126 does not have any vertical overflow, invoke 1.127 <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with 1.128 <code title="dom-Window-scrollX"><a href="#dom-window-scrollx">scrollX</a></code> as first 1.129 - argument and <var title="">y</var> as second.</li> 1.130 + argument and <var title="">y</var> as second, and, if the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, the given value as the third argument.</li> 1.131 <li><p><a href="#scroll-an-element" title="scroll an element">Scroll the element</a> to 1.132 - <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code>,<var title="">y</var>. 1.133 + <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code>,<var title="">y</var>, with the scroll behavior being the value of the <code title="">behavior</code> dictionary 1.134 + member if the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, or <code title="">auto</code> otherwise. 1.135 </ol> 1.136 1.137 <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> 1.138 @@ -730,22 +747,27 @@ 1.139 </ol> 1.140 <p>When setting the <code title="dom-Element-scrollLeft"><a href="#dom-element-scrollleft">scrollLeft</a></code> attribute these steps must be run:</p> 1.141 <ol> 1.142 - <li><p>Let <var title="">x</var> be the given value.</li> 1.143 + <li><p>If the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, and the <code title="">x</code> dictionary member is not present, abort these steps. 1.144 + <li><p>If the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, let <var title="">x</var> be the value of the <code title="">x</code> dictionary member. Otherwise, 1.145 + let <var title="">x</var> be the given value.</li> 1.146 <li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the 1.147 element is the root element and the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in 1.148 <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, or the element has no overflow, terminate these 1.149 steps.</li> 1.150 <li><p>If the element is the root element invoke 1.151 <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with 1.152 - <var title="">x</var> as first argument and zero as second.</li> 1.153 + <var title="">x</var> as first argument and zero as second, and, if the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, the given value as the third 1.154 + argument.</li> 1.155 <li><p>If the element is <a href="#the-html-body-element">the HTML <code>body</code> element</a>, 1.156 the <code class="external"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> is in <a class="external" href="http://dom.spec.whatwg.org/#concept-document-quirks" title="concept-document-quirks">quirks mode</a>, and the element 1.157 does not have any vertical overflow, invoke 1.158 <code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with 1.159 <var title="">x</var> as first argument and 1.160 - <code title="dom-Window-scrollY"><a href="#dom-window-scrolly">scrollY</a></code> as second.</li> 1.161 + <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="#scrolloptions">ScrollOptions</a></code> object, the given value as the third 1.162 + argument.</li> 1.163 <li><p><a href="#scroll-an-element" title="Scroll an element">Scroll the element</a> to 1.164 - <var title="">x</var>,<code title="dom-Element-scrollTop"><a href="#dom-element-scrolltop">scrollTop</a></code>. 1.165 + <var title="">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 1.166 + member if the given value is a <code><a href="#scrolloptions">ScrollOptions</a></code> object, or <code title="">auto</code> otherwise. 1.167 </ol> 1.168 1.169 <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> 1.170 @@ -827,7 +849,7 @@ 1.171 <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title="">Element</code> Scrolling Members</h3> 1.172 1.173 <p>To <dfn id="scroll-an-element-into-view">scroll an element into view</dfn>, optionally with an 1.174 -<i title="">align to top flag</i> set, means to run these steps for each 1.175 +<i title="">align to top flag</i> set, and with a scroll behavior <var title="">behavior</var>, means to run these steps for each 1.176 ancestor element or <a href="#viewport">viewport</a> that establishes a 1.177 scrolling box <var title="">box</var>, in order of innermost to outermost scrolling box:</p> 1.178 1.179 @@ -884,12 +906,12 @@ 1.180 </dd> 1.181 </dl> 1.182 </li> 1.183 - <li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var title="">box</var> to <var title="">position</var>, with the set of steps <var title="">task</var>, and 1.184 - <var title="">element</var> as the associated element. 1.185 + <li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var title="">box</var> to <var title="">position</var>, with the set of steps <var title="">task</var>, 1.186 + <var title="">element</var> as the associated element and <var title="">behavior</var> as the scroll behavior. 1.187 1.188 </ol> 1.189 1.190 -<p>To <dfn id="scroll-an-element">scroll an element</dfn> to <var title="">x</var>,<var title="">y</var> means to:</p> 1.191 +<p>To <dfn id="scroll-an-element">scroll an element</dfn> to <var title="">x</var>,<var title="">y</var> with a scroll behavior <var title="">behavior</var> means to:</p> 1.192 1.193 <ol> 1.194 <li><p>Let <var title="">element</var> be the element. 1.195 @@ -927,8 +949,8 @@ 1.196 <code title="event-scroll">scroll</code> at the element.</li> 1.197 </ol> 1.198 1.199 - <li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var title="">box</var> to <var title="">position</var>, with the set of steps <var title="">task</var>, and 1.200 - <var title="">element</var> as the associated element. 1.201 + <li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var title="">box</var> to <var title="">position</var>, with the set of steps <var title="">task</var>, 1.202 + <var title="">element</var> as the associated element and <var title="">behavior</var> as the scroll behavior. 1.203 1.204 </ol> 1.205
2.1 --- a/cssom-view/Overview.src.html Fri May 24 14:53:56 2013 +0200 2.2 +++ b/cssom-view/Overview.src.html Fri May 24 15:44:29 2013 +0200 2.3 @@ -242,12 +242,17 @@ 2.4 <h3>Scrolling</h3> 2.5 2.6 <p>When a user agent is to <dfn>perform a scroll</dfn> of a scrolling box <var title>box</var>, to a given position <var title>position</var>, with a set of 2.7 -steps <var title>task</var>, and an associated element <var title>element</var> the following steps must be run: 2.8 +steps <var title>task</var>, an associated element <var title>element</var> and a scroll behavior <var title>behavior</var>, the following steps must be run: 2.9 2.10 <ol> 2.11 <li><p><span title=concept-smooth-scroll-aborted>Abort</span> any ongoing <span title=concept-smooth-scroll>smooth scroll</span> for <var title>box</var>. 2.12 - <li><p>If <var title>element</var> is not null and its computed value of the '<code>scroll-behavior</code>' property is 2.13 - '<code title=scroll-behavior-smooth>smooth</code>', and the user agent honors the '<code>scroll-behavior</code>' property, then follow these substeps: 2.14 + <li><p>If the user agent honors the '<code>scroll-behavior</code>' property and one of the following are true: 2.15 + <ul> 2.16 + <li><p><var title>behavior</var> is <code title>auto</code> and <var title>element</var> is not null and its computed value of the '<code>scroll-behavior</code>' 2.17 + property is '<code title=scroll-behavior-smooth>smooth</code>' 2.18 + <li><p><var title>behavior</var> is <code title>smooth</code> 2.19 + </ul> 2.20 + <p>...then follow these substeps: 2.21 <ol> 2.22 <li><p>Perform a <span title=concept-smooth-scroll>smooth scroll</span> of <var title>box</var> to <var title>position</var>. 2.23 <li><p><span data-anolis-spec=html>Queue a task</span> to run <var title>task</var>, unless a <span data-anolis-spec=html title=concept-task>task</span> to 2.24 @@ -275,7 +280,15 @@ 2.25 2.26 <h2>Extensions to the <code title>Window</code> Interface</h2> 2.27 2.28 -<pre class=idl>partial interface <span data-anolis-spec=html>Window</span> { 2.29 +<pre class=idl>enum <dfn>ScrollBehavior</dfn> { "auto", "instant", "smooth" }; 2.30 + 2.31 +dictionary <dfn>ScrollOptions</dfn> { 2.32 + double x; 2.33 + double y; 2.34 + <span>ScrollBehavior</span> behavior = "auto"; 2.35 +}; 2.36 + 2.37 +partial interface <span data-anolis-spec=html>Window</span> { 2.38 <span>MediaQueryList</span> <span title=dom-Window-matchMedia>matchMedia</span>(DOMString query); 2.39 readonly attribute <span>Screen</span> <span title=dom-Window-screen>screen</span>; 2.40 2.41 @@ -288,9 +301,9 @@ 2.42 readonly attribute double <span title=dom-Window-pageXOffset>pageXOffset</span>; 2.43 readonly attribute double <span title=dom-Window-scrollY>scrollY</span>; 2.44 readonly attribute double p<span title=dom-Window-pageYOffset>pageYOffset</span>; 2.45 - void <span title=dom-Window-scroll>scroll(double x, double y)</span>; 2.46 - void <span title=dom-Window-scrollTo>scrollTo(double x, double y)</span>; 2.47 - void <span title=dom-Window-scrollBy>scrollBy(double x, double y)</span>; 2.48 + void <span title=dom-Window-scroll>scroll</span>(double x, double y, optional <span>ScrollOptions</span> options); 2.49 + void <span title=dom-Window-scrollTo>scrollTo</span>(double x, double y, optional <span>ScrollOptions</span> options); 2.50 + void <span title=dom-Window-scrollBy>scrollBy</span>(double x, double y, optional <span>ScrollOptions</span> options); 2.51 2.52 // client 2.53 readonly attribute double <span title=dom-Window-screenX>screenX</span>; 2.54 @@ -338,7 +351,7 @@ 2.55 2.56 <p>The <dfn title=dom-Window-pageYOffset><code>pageYOffset</code></dfn> attribute must return the value returned by the <code>scrollY</code> attribute.</p> 2.57 2.58 -<p>When the <dfn title=dom-Window-scroll><code>scroll(<var title>x</var>, <var title>y</var>)</code></dfn> method is invoked these steps must be run:</p> 2.59 +<p>When the <dfn title=dom-Window-scroll><code>scroll(<var title>x</var>, <var title>y</var>, <var title>options</var>)</code></dfn> method is invoked these steps must be run:</p> 2.60 <ol> 2.61 <li><p>If there is no <span>viewport</span>, abort these steps. 2.62 <dl> 2.63 @@ -367,13 +380,13 @@ 2.64 <code data-anolis-spec=dom>Document</code> object. 2.65 </ol> 2.66 <li><p><span>Perform a scroll</span> of the <span>viewport</span> to <var title>position</var>, with the set of steps <var title>task</var>, and the 2.67 - <code data-anolis-spec=dom>Document</code>'s root element as the associated element, if there is one, or <code>null</code> otherwise. 2.68 + <code data-anolis-spec=dom>Document</code>'s root element as the associated element, if there is one, or <code>null</code> otherwise, and the scroll behavior being the value of the <code title>behavior</code> dictionary member of <var title>options</var>. 2.69 </ol> 2.70 2.71 -<p>When the <dfn title=dom-Window-scrollTo><code>scrollTo(<var title>x</var>, <var title>y</var>)</code></dfn> method is invoked, the user agent must act as if 2.72 +<p>When the <dfn title=dom-Window-scrollTo><code>scrollTo(<var title>x</var>, <var title>y</var>, <var title>options</var>)</code></dfn> method is invoked, the user agent must act as if 2.73 the <code title=dom-Window-scroll>scroll()</code> method was invoked with the same arguments.</p> 2.74 2.75 -<p>When the <dfn title=dom-Window-scrollBy><code>scrollBy(<var title>x</var>, <var title>y</var>)</code></dfn> method is invoked, the user agent must act as if 2.76 +<p>When the <dfn title=dom-Window-scrollBy><code>scrollBy(<var title>x</var>, <var title>y</var>, <var title>options</var>)</code></dfn> method is invoked, the user agent must act as if 2.77 the <code title=dom-Window-scroll>scroll()</code> method was invoked with 2.78 <var title>x</var> plus <code title='dom-Window-scrollX'>scrollX</code> 2.79 as first argument and <var title>y</var> plus 2.80 @@ -574,9 +587,9 @@ 2.81 <pre class=idl>partial interface <span data-anolis-spec=dom>Element</span> { 2.82 <span>ClientRectList</span> <span title=dom-Element-getClientRects>getClientRects</span>(); 2.83 <span>ClientRect</span> <span title=dom-Element-getBoundingClientRect>getBoundingClientRect</span>(); 2.84 - void <span title=dom-Element-scrollIntoView>scrollIntoView</span>(optional boolean top); 2.85 - attribute double <span title=dom-Element-scrollTop>scrollTop</span>; 2.86 - attribute double <span title=dom-Element-scrollLeft>scrollLeft</span>; 2.87 + void <span title=dom-Element-scrollIntoView>scrollIntoView</span>(optional boolean top, optional <span>ScrollOptions</span> options); 2.88 + attribute (double or <span>ScrollOptions</span>) <span title=dom-Element-scrollTop>scrollTop</span>; 2.89 + attribute (double or <span>ScrollOptions</span>) <span title=dom-Element-scrollLeft>scrollLeft</span>; 2.90 readonly attribute double <span title=dom-Element-scrollWidth>scrollWidth</span>; 2.91 readonly attribute double <span title=dom-Element-scrollHeight>scrollHeight</span>; 2.92 readonly attribute double <span title=dom-Element-clientTop>clientTop</span>; 2.93 @@ -639,11 +652,12 @@ 2.94 var exampleHeight = example.height;</code></pre> 2.95 </div> 2.96 2.97 -<p>The <dfn title=dom-Element-scrollIntroView><code>scrollIntoView(<var title>top</var>)</code></dfn> method must run these steps:</p> 2.98 +<p>The <dfn title=dom-Element-scrollIntroView><code>scrollIntoView(<var title>top</var>, <var title>options</var>)</code></dfn> method must run these steps:</p> 2.99 <ol> 2.100 <li><p>If the element does not have any associated <span>CSS layout box</span> terminate these steps.</p></li> 2.101 <li><p><span title='scroll an element into view'>Scroll the element into view</span> with the 2.102 - <i title>align to top flag</i> set if <var title>top</var> is true or omitted.</p></li> 2.103 + <i title>align to top flag</i> set if <var title>top</var> is true or omitted, and the scroll behavior being the value of the <code title>behavior</code> 2.104 + dictionary member of <var title>options</var>.</p></li> 2.105 </ol> 2.106 2.107 <p>The <dfn title=dom-Element-scrollTop><code>scrollTop</code></dfn> attribute must return the result of running these steps:</p> 2.108 @@ -663,22 +677,25 @@ 2.109 </ol> 2.110 <p>When setting the <code title=dom-Element-scrollTop>scrollTop</code> attribute these steps must be run:</p> 2.111 <ol> 2.112 - <li><p>Let <var title>y</var> be the given value.</p></li> 2.113 + <li><p>If the given value is a <code>ScrollOptions</code> object, and the <code title>y</code> dictionary member is not present, abort these steps. 2.114 + <li><p>If the given value is a <code>ScrollOptions</code> object, let <var title>y</var> be the value of the <code title>y</code> dictionary member. Otherwise, 2.115 + let <var title>y</var> be the given value.</p></li> 2.116 <li><p>If the element does not have any associated <span>CSS layout box</span>, the 2.117 element is the root element and the <code data-anolis-spec=dom>Document</code> is in 2.118 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, or the element has no overflow, terminate these 2.119 steps.</p></li> 2.120 <li><p>If the element is the root element invoke 2.121 <code title=dom-Window-scroll>scroll()</code> with zero as first 2.122 - argument and <var title>y</var> as second.</p></li> 2.123 + argument and <var title>y</var> as second, and, if the given value is a <code>ScrollOptions</code> object, the given value as the third argument.</p></li> 2.124 <li><p>If the element is <span>the HTML <code>body</code> element</span>, 2.125 the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, and the element 2.126 does not have any vertical overflow, invoke 2.127 <code title=dom-Window-scroll>scroll()</code> with 2.128 <code title=dom-Window-scrollX>scrollX</code> as first 2.129 - argument and <var title>y</var> as second.</p></li> 2.130 + argument and <var title>y</var> as second, and, if the given value is a <code>ScrollOptions</code> object, the given value as the third argument.</p></li> 2.131 <li><p><span title='scroll an element'>Scroll the element</span> to 2.132 - <code title=dom-Element-scrollLeft>scrollLeft</code>,<var title>y</var>. 2.133 + <code title=dom-Element-scrollLeft>scrollLeft</code>,<var title>y</var>, with the scroll behavior being the value of the <code title>behavior</code> dictionary 2.134 + member if the given value is a <code>ScrollOptions</code> object, or <code title>auto</code> otherwise. 2.135 </ol> 2.136 2.137 <p>The <dfn title=dom-Element-scrollLeft><code>scrollLeft</code></dfn> attribute must return the result of running these steps:</p> 2.138 @@ -698,22 +715,27 @@ 2.139 </ol> 2.140 <p>When setting the <code title=dom-Element-scrollLeft>scrollLeft</code> attribute these steps must be run:</p> 2.141 <ol> 2.142 - <li><p>Let <var title>x</var> be the given value.</p></li> 2.143 + <li><p>If the given value is a <code>ScrollOptions</code> object, and the <code title>x</code> dictionary member is not present, abort these steps. 2.144 + <li><p>If the given value is a <code>ScrollOptions</code> object, let <var title>x</var> be the value of the <code title>x</code> dictionary member. Otherwise, 2.145 + let <var title>x</var> be the given value.</p></li> 2.146 <li><p>If the element does not have any associated <span>CSS layout box</span>, the 2.147 element is the root element and the <code data-anolis-spec=dom>Document</code> is in 2.148 <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, or the element has no overflow, terminate these 2.149 steps.</p></li> 2.150 <li><p>If the element is the root element invoke 2.151 <code title=dom-Window-scroll>scroll()</code> with 2.152 - <var title>x</var> as first argument and zero as second.</p></li> 2.153 + <var title>x</var> as first argument and zero as second, and, if the given value is a <code>ScrollOptions</code> object, the given value as the third 2.154 + argument.</p></li> 2.155 <li><p>If the element is <span>the HTML <code>body</code> element</span>, 2.156 the <code data-anolis-spec=dom>Document</code> is in <span data-anolis-spec=dom title=concept-document-quirks>quirks mode</span>, and the element 2.157 does not have any vertical overflow, invoke 2.158 <code title='dom-Window-scroll'>scroll()</code> with 2.159 <var title>x</var> as first argument and 2.160 - <code title=dom-Window-scrollY>scrollY</code> as second.</p></li> 2.161 + <code title=dom-Window-scrollY>scrollY</code> as second, and, if the given value is a <code>ScrollOptions</code> object, the given value as the third 2.162 + argument.</p></li> 2.163 <li><p><span title='Scroll an element'>Scroll the element</span> to 2.164 - <var title>x</var>,<code title=dom-Element-scrollTop>scrollTop</code>. 2.165 + <var title>x</var>,<code title=dom-Element-scrollTop>scrollTop</code>, with the scroll behavior being the value of the <code title>behavior</code> dictionary 2.166 + member if the given value is a <code>ScrollOptions</code> object, or <code title>auto</code> otherwise. 2.167 </ol> 2.168 2.169 <p>The <dfn title=dom-Element-scrollWidth><code>scrollWidth</code></dfn> attribute must return the result of running these steps:</p> 2.170 @@ -795,7 +817,7 @@ 2.171 <h3><code title>Element</code> Scrolling Members</h3> 2.172 2.173 <p>To <dfn>scroll an element into view</dfn>, optionally with an 2.174 -<i title>align to top flag</i> set, means to run these steps for each 2.175 +<i title>align to top flag</i> set, and with a scroll behavior <var title>behavior</var>, means to run these steps for each 2.176 ancestor element or <span>viewport</span> that establishes a 2.177 scrolling box <var title>box</var>, in order of innermost to outermost scrolling box:</p> 2.178 2.179 @@ -852,12 +874,12 @@ 2.180 </dd> 2.181 </dl> 2.182 </li> 2.183 - <li><p><span>Perform a scroll</span> of <var title>box</var> to <var title>position</var>, with the set of steps <var title>task</var>, and 2.184 - <var title>element</var> as the associated element. 2.185 + <li><p><span>Perform a scroll</span> of <var title>box</var> to <var title>position</var>, with the set of steps <var title>task</var>, 2.186 + <var title>element</var> as the associated element and <var title>behavior</var> as the scroll behavior. 2.187 2.188 </ol> 2.189 2.190 -<p>To <dfn>scroll an element</dfn> to <var title>x</var>,<var title>y</var> means to:</p> 2.191 +<p>To <dfn>scroll an element</dfn> to <var title>x</var>,<var title>y</var> with a scroll behavior <var title>behavior</var> means to:</p> 2.192 2.193 <ol> 2.194 <li><p>Let <var title>element</var> be the element. 2.195 @@ -895,8 +917,8 @@ 2.196 <code title="event-scroll">scroll</code> at the element.</p></li> 2.197 </ol> 2.198 2.199 - <li><p><span>Perform a scroll</span> of <var title>box</var> to <var title>position</var>, with the set of steps <var title>task</var>, and 2.200 - <var title>element</var> as the associated element. 2.201 + <li><p><span>Perform a scroll</span> of <var title>box</var> to <var title>position</var>, with the set of steps <var title>task</var>, 2.202 + <var title>element</var> as the associated element and <var title>behavior</var> as the scroll behavior. 2.203 2.204 </ol> 2.205
