8000 [cssom-view] Define scrolling box. https://www.w3.org/Bugs/Public/sho… · xfq/csswg-drafts@541377d · GitHub
Skip to content

Commit 541377d

Browse files
author
Simon Pieters
committed
[cssom-view] Define scrolling box. https://www.w3.org/Bugs/Public/show_bug.cgi?id=23222
--HG-- extra : rebase_source : 6d53d7368462e7badab3480dfcbadfd3b815ed39
1 parent 1faa709 commit 541377d

2 files changed

Lines changed: 52 additions & 41 deletions

File tree

cssom-view/Overview.html

Lines changed: 29 additions & 22 deletions
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 11 September 2013</h2>
19+
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 12 September 2013</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 11 September 2013 Editor's Draft of CSSOM View. Please send
86+
<p>This is the 12 September 2013 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>)
@@ -241,8 +241,11 @@ <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
241241

242242
<p><dfn id="block-flow-direction">Block flow direction</dfn> and <dfn id="inline-base-direction">inline base direction</dfn> are defined in CSS Writing Modes Module. <a href="#refsCSSWRITINGMODES">[CSSWRITINGMODES]</a>
243243

244-
<p>A scrolling box of a <a href="#viewport">viewport</a> or element has two <dfn id="overflow-directions">overflow directions</dfn>, depending on the <a href="#viewport">viewport</a>'s or element's
245-
<a href="#block-flow-direction">block flow direction</a> and <a href="#inline-base-direction">inline base direction</a>, as follows:
244+
<p>Elements and <a href="#viewport" title="viewport">viewports</a> have an associated <dfn id="scrolling-box">scrolling box</dfn> if it overflows its content area<!--XXX xref--> and either has
245+
a scrolling mechanism<!--XXX xref--> or the used value of the 'overflow-x' or 'overflow-y' property is 'hidden'. <a href="#refsCSSBOX">[CSSBOX]</a>
246+
247+
<p>A <a href="#scrolling-box">scrolling box</a> of a <a href="#viewport">viewport</a> or element has two <dfn id="overflow-directions">overflow directions</dfn>, depending on the <a href="#viewport">viewport</a>'s or
248+
element's <a href="#block-flow-direction">block flow direction</a> and <a href="#inline-base-direction">inline base direction</a>, as follows:
246249

247250
<dl class="switch">
248251
<dt>If the <a href="#block-flow-direction">block flow direction</a> is top-to-bottom and the <a href="#inline-base-direction">inline base direction</a> is left-to-right
@@ -258,7 +261,7 @@ <h2 id="terminology"><span class="secno">3 </span>Terminology</h2>
258261
</dl>
259262

260263
<p>The term <dfn id="scrolling-area">scrolling area</dfn> refers to a box of a <a href="#viewport">viewport</a> or an element that has the following edges, depending on the
261-
<a href="#viewport">viewport</a>'s or element's scrolling box's <a href="#overflow-directions">overflow directions</a>.
264+
<a href="#viewport">viewport</a>'s or element's <a href="#scrolling-box">scrolling box</a>'s <a href="#overflow-directions">overflow directions</a>.
262265

263266
<table class="complex data">
264267
<thead>
@@ -434,7 +437,7 @@ <h2 id="common-infrastructure"><span class="secno">4 </span>Common Infrastructur
434437

435438
<h3 id="scrolling"><span class="secno">4.1 </span>Scrolling</h3>
436439

437-
<p>When a user agent is to <dfn id="perform-a-scroll">perform a scroll</dfn> of a scrolling box <var>box</var>, to a given position <var>position</var>, with a set of
440+
<p>When a user agent is to <dfn id="perform-a-scroll">perform a scroll</dfn> of a <a href="#scrolling-box">scrolling box</a> <var>box</var>, to a given position <var>position</var>, with a set of
438441
steps <var>task</var>, an associated element <var>element</var> and optionally a scroll behavior <var>behavior</var> (which is
439442
<code title="">auto</code> if omitted), the following steps must be run:
440443

@@ -463,12 +466,12 @@ <h3 id="scrolling"><span class="secno">4.1 </span>Scrolling</h3>
463466
</ol>
464467
</ol>
465468

466-
<p>When a user agent is to perform a <dfn id="concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</dfn> of a scrolling box <var>box</var> to <var>position</var>,
469+
<p>When a user agent is to perform a <dfn id="concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</dfn> of a <a href="#scrolling-box">scrolling box</a> <var>box</var> to <var>position</var>,
467470
it must update the scroll position of <var>box</var> in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is
468471
<dfn id="concept-smooth-scroll-completed" title="concept-smooth-scroll-completed">completed</dfn>, the scroll position of <var>box</var> must be <var>position</var>. The scroll can also
469472
be <dfn id="concept-smooth-scroll-aborted" title="concept-smooth-scroll-aborted">aborted</dfn>, either by an algorithm or by the user. <!--fingerprint-->
470473

471-
<p>When a user agent is to perform an <dfn id="concept-instant-scroll" title="concept-instant-scroll">instant scroll</dfn> of a scrolling box <var>box</var> to
474+
<p>When a user agent is to perform an <dfn id="concept-instant-scroll" title="concept-instant-scroll">instant scroll</dfn> of a <a href="#scrolling-box">scrolling box</a> <var>box</var> to
472475
<var>position</var>, it must update the scroll position of <var>box</var> to <var>position</var>.
473476

474477
<p>To <dfn id="scroll-to-the-beginning-of-the-document">scroll to the beginning of the document</dfn> for a document <var>document</var>, follow these steps:
@@ -1078,8 +1081,8 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
10781081
Otherwise, let <var>y</var> be the given value.</li>
10791082
<li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the
10801083
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
1081-
<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 scrolling box, or the element has no overflow,
1082-
terminate these steps.</li>
1084+
<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
1085+
overflow, terminate these steps.</li>
10831086
<li><p>If the element is the root element invoke
10841087
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with zero as first
10851088
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>
@@ -1116,8 +1119,8 @@ <h2 id="extensions-to-the-element-interface"><span class="secno">7 </span>Extens
11161119
Otherwise, let <var>x</var> be the given value.</li>
11171120
<li><p>If the element does not have any associated <a href="#css-layout-box">CSS layout box</a>, the
11181121
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
1119-
<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 scrolling box, or the element has no overflow,
1120-
terminate these steps.</li>
1122+
<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
1123+
overflow, terminate these steps.</li>
11211124
<li><p>If the element is the root element invoke
11221125
<code title="dom-Window-scroll"><a href="#dom-window-scroll">scroll()</a></code> with
11231126
<var>x</var> as first argument and zero as second, and, if the given value is a <code><a href="#scrolloptionshorizontal">ScrollOptionsHorizontal</a></code> object, the given value as the third
@@ -1217,7 +1220,7 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
12171220

12181221
<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
12191222
<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
1220-
a scrolling box <var>scrolling box</var>, in order of innermost to outermost scrolling box:</p>
1223+
a <a href="#scrolling-box">scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a href="#scrolling-box">scrolling box</a>:</p>
12211224

12221225
<ol>
12231226
<li><p>If the <code class="external" data-anolis-spec="dom"><a href="http://dom.spec.whatwg.org/#document">Document</a></code> associated
@@ -1306,7 +1309,7 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
13061309
<code title="">auto</code> if omitted) means to:</p>
13071310

13081311
<ol>
1309-
<li><p>Let <var>box</var> be <var>element</var>'s associated scrolling box.
1312+
<li><p>Let <var>box</var> be <var>element</var>'s associated <a href="#scrolling-box">scrolling box</a>.
13101313
<li>
13111314
<dl class="switch">
13121315
<dt>If <var>box</var> has rightward <a href="#overflow-directions" title="overflow directions">overflow direction</a></dt>
@@ -1667,33 +1670,36 @@ <h3 id="smooth-scrolling:-the-'scroll-behavior'-property"><span class="secno">13
16671670
<pre class="propdef">Name: <dfn id="scroll-behavior">scroll-behavior</dfn>
16681671
Value: instant | smooth
16691672
Initial: instant
1670-
Applies to: scrolling boxes
1673+
Applies to: <a href="#scrolling-box" title="scrolling box">scrolling boxes</a>
16711674
Inherited: no
16721675
Computed value: specified value
16731676
Media: visual
16741677
Animatable: no
16751678
Canonical Order: per grammar
16761679
</pre>
16771680

1678-
<p>The '<a href="#scroll-behavior">scroll-behavior</a>' property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling
1679-
APIs. Scrolls that are performed by the user are not affected by this property. When this property is specified on the root element, it applies to the
1680-
<a href="#viewport">viewport</a> instead.
1681+
<p>The '<a href="#scroll-behavior">scroll-behavior</a>' property specifies the scrolling behavior for a <a href="#scrolling-box">scrolling box</a>, when scrolling happens due to navigation or
1682+
CSSOM scrolling APIs. Scrolls that are performed by the user are not affected by this property. When this property is specified on the root element, it applies
1683+
to the <a href="#viewport">viewport</a> instead.
16811684

16821685
<p class="note">The '<a href="#scroll-behavior">scroll-behavior</a>' property of the HTML <code title="">body</code> element is <em>not</em> propagated to the viewport.
16831686

16841687
<dl>
16851688
<dt>'<dfn id="scroll-behavior-instant" title="scroll-behavior-instant">instant</dfn>'
1686-
<dd><p>The scrolling box is scrolled in an instant fashion.
1689+
<dd><p>The <a href="#scrolling-box">scrolling box</a> is scrolled in an instant fashion.
16871690

16881691
<dt>'<dfn id="scroll-behavior-smooth" title="scroll-behavior-smooth">smooth</dfn>'
1689-
<dd><p>The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents
1690-
should follow platform convensions, if any. <!--fingerprint-->
1692+
<dd><p>The <a href="#scrolling-box">scrolling box</a> is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User
1693+
agents should follow platform convensions, if any. <!--fingerprint-->
16911694
</dl>
16921695

16931696
<p>User agents may ignore this property. <!--fingerprint-->
16941697

16951698
<h2 class="no-num" id="references">References</h2>
1696-
<div id="anolis-references"><dl><dt id="refsCSSOM">[CSSOM]
1699+
<div id="anolis-references"><dl><dt id="refsCSSBOX">[CSSBOX]
1700+
<dd><cite><a href="http://dev.w3.org/csswg/css-box/">CSS basic box model</a></cite>, Bert Bos and Anton Prowse. W3C.
1701+
1702+
<dt id="refsCSSOM">[CSSOM]
16971703
<dd><cite><a href="http://dev.w3.org/csswg/cssom/">CSS Object Model (CSSOM)</a></cite>, Simon Pieters and Glenn Adams. W3C.
16981704

16991705
<dt id="refsCSSWRITINGMODES">[CSSWRITINGMODES]
@@ -1743,6 +1749,7 @@ <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
17431749
Sam Weinig,
17441750
Scott Johnson,
17451751
Sebastian Zartner,
1752+
Stewart Brodie,
17461753
Sylvain Galineau,
17471754
Tab Atkins,
17481755
Tarquin Wilton-Jones,

0 commit comments

Comments
 (0)