Skip to content

Commit c0c60e8

Browse files
author
Simon Pieters
committed
[cssom-view] Make scroll and resize events sync with animation frames. https://www.w3.org/Bugs/Public/show_bug.cgi?id=26516 
1 parent 077d15c commit c0c60e8

3 files changed

Lines changed: 157 additions & 137 deletions

File tree

‎cssom-view/Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $(EDFILE): Overview.src.html $(XREF) Makefile
2020
--w3c-compat-substitutions --w3c-compat-xref-a-placement --enable=xspecxref --w3c-compat-class-toc --enable=refs --w3c-shortname="cssom-view" \
2121
--filter=".publish" $< $@; \
2222
$(SED) 's/\[/\(/g;s/\]/\)/g' <$(SRCFILE) >$(VNUFILE); \
23-
$(CURL) -F out=gnu -F content=@$(VNUFILE) http://html5.validator.nu/; \
23+
$(CURL) -F out=gnu -F content=@$(VNUFILE) https://html5.validator.nu/; \
2424
$(RM) $(VNUFILE); \
2525
$(CURL) 'http://www.w3.org/2009/07/webidl-check?doc=http%3A%2F%2Fdev.w3.org%2Fcsswg%2Fcssom-view%2F&output=text'
2626
#$(CURL) -F output=text -F input=@$(SRCFILE) http://www.w3.org/2009/07/webidl-check

‎cssom-view/Overview.html‎

Lines changed: 79 additions & 69 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 15 October 2014</h2>
19+
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 20 November 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 15 October 2014 Editor's Draft of CSSOM View. Please send
86+
<p>This is the 20 November 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>)
@@ -460,9 +460,11 @@ <h2 id="common-infrastructure"><span class="secno">4 </span>Common Infrastructur
460460

461461
<h3 id="scrolling"><span class="secno">4.1 </span>Scrolling</h3>
462462

463-
<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
464-
steps <var>task</var>, an associated element <var>element</var> and optionally a scroll behavior <var>behavior</var> (which is
465-
<code title="">auto</code> if omitted), the following steps must be run:
463+
<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>,
464+
to a given position <var>position</var>,
465+
an associated element <var>element</var> and optionally a scroll behavior <var>behavior</var>
466+
(which is <code title="">auto</code> if omitted),
467+
the following steps must be run:
466468

467469
<ol>
468470
<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>box</var>.
@@ -472,21 +474,8 @@ <h3 id="scrolling"><span class="secno">4.1 </span>Scrolling</h3>
472474
'<a href="#scroll-behavior">scroll-behavior</a>' property is '<a href="#scroll-behavior-smooth" title="scroll-behavior-smooth">smooth</a>'
473475
<li><p><var>behavior</var> is <code title="">smooth</code>
474476
</ul>
475-
<p>...then follow these substeps:
476-
<ol>
477-
<li><p>Perform a <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a> of <var>box</var> to <var>position</var>.
478-
<li><p><a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">Queue a task</a> to run <var>task</var>, unless a <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" title="concept-task">task</a> to
479-
run <var>task</var> is in the <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" title="queue a task">queue</a>.
480-
<li><p>Repeat the previous step in a user-agent-defined interval while the <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a> is ongoing, as well as when
481-
the <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a> is <a href="#concept-smooth-scroll-completed" title="concept-smooth-scroll-completed">completed</a> (but not if it is
482-
<a href="#concept-smooth-scroll-aborted" title="concept-smooth-scroll-aborted">aborted</a>). <!--fingerprint-->
483-
</ol>
484-
<li><p>Otherwise, follow these substeps:
485-
<ol>
486-
<li><p>Perform an <a href="#concept-instant-scroll" title="concept-instant-scroll">instant scroll</a> of <var>box</var> to <var>position</var>.
487-
<li><p><a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">Queue a task</a> to run <var>task</var>, unless a <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" title="concept-task">task</a> to
488-
run <var>task</var> is in the <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" title="queue a task">queue</a>.
489-
</ol>
477+
<p>...then perform a <a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a> of <var>box</var> to <var>position</var>.
478+
Otherwise, perform an <a href="#concept-instant-scroll" title="concept-instant-scroll">instant scroll</a> of <var>box</var> to <var>position</var>.
490479
</ol>
491480

492481
<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>,
@@ -506,12 +495,8 @@ <h3 id="scrolling"><span class="secno">4.1 </span>Scrolling</h3>
506495
<a href="#scrolling-area">scrolling area</a> with the <a href="#beginning-edges">beginning edges</a> of <var>viewport</var>.
507496
<li><p>If <var>position</var> is the same as <var>viewport</var>'s current scroll position, and <var>viewport</var> does not have an ongoing
508497
<a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps.
509-
<li><p>Let <var>task</var> be these steps:
510-
<ol>
511-
<li><p><a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a> named <code title="">scroll</code> that bubbles at <var>document</var>.
512-
</ol>
513-
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>viewport</var> to <var>position</var>, with the set of steps <var>task</var>, and <var>document</var>'s root
514-
element as the associated element, if there is one, or null otherwise.
498+
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>viewport</var> to <var>position</var>,
499+
and <var>document</var>'s root element as the associated element, if there is one, or null otherwise.
515500
</ol>
516501

517502
<p class="note">This algorithm is used when navigating to the <code title="">#top</code> fragment identifier, as defined in HTML. <a href="#refsHTML">[HTML]</a>
@@ -732,14 +717,10 @@ <h2 id="extensions-to-the-window-interface"><span class="secno">5 </span>Extensi
732717
<a href="#viewport">viewport</a> <a href="#scrolling-area">scrolling area</a> with the top of the <a href="#viewport">viewport</a>.
733718
<li><p>If <var>position</var> is the same as the <a href="#viewport">viewport</a>'s current scroll position, and the <a href="#viewport">viewport</a> does not have an ongoing
734719
<a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps.
735-
<li><p>Let <var>task</var> be these steps:
736-
<ol>
737-
<li><p><a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a> named <code title="">scroll</code> that bubbles at the
738-
<code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> object.
739-
</ol>
740-
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of the <a href="#viewport">viewport</a> to <var>position</var>, with the set of steps <var>task</var>, and the
741-
<code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code>'s root element as the associated element, if there is one, or null otherwise, and the scroll behavior being the
742-
value of the <code title="">behavior</code> dictionary member of <var>options</var>.
720+
<li><p>Let <var>document</var> be the <a href="#viewport">viewport</a>'s associated <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code>.
721+
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of the <a href="#viewport">viewport</a> to <var>position</var>,
722+
<var>document</var>'s root element as the associated element, if there is one, or null otherwise,
723+
and the scroll behavior being the value of the <code title="">behavior</code> dictionary member of <var>options</var>.
743724
</ol>
744725

745726
<p>When the <dfn id="dom-window-scrollto" title="dom-Window-scrollTo"><code>scrollTo()</code></dfn> method is invoked, the
@@ -1505,26 +1486,16 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
15051486
<dt>If <var>scrolling box</var> is associated with an element</dt>
15061487
<dd>
15071488
<p>Let <var>associated element</var> be the element.
1508-
<p>Let <var>task</var> be these steps:
1509-
<ol>
1510-
<li><p><a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a>
1511-
named <code title="">scroll</code> at <var>associated element</var>.</p>
1512-
</ol>
15131489
</dd>
15141490

15151491
<dt>If <var>scrolling box</var> is associated with a <a href="#viewport">viewport</a></dt>
15161492
<dd>
1517-
<p>Let <var>associated element</var> be the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code>'s root element, if there is one, or null otherwise.
1518-
<p>Let <var>task</var> be these steps:
1519-
<ol>
1520-
<li><p><a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a>
1521-
named <code title="">scroll</code> that bubbles at the
1522-
<code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> object associated with the <a href="#viewport">viewport</a>.</p>
1523-
</ol>
1493+
<p>Let <var>document</var> be the <a href="#viewport">viewport</a>'s associated <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code>.
1494+
<p>Let <var>associated element</var> be <var>document</var>'s root element, if there is one, or null otherwise.
15241495
</dd>
15251496
</dl>
15261497
</li>
1527-
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>scrolling box</var> to <var>position</var>, with the set of steps <var>task</var>,
1498+
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>scrolling box</var> to <var>position</var>,
15281499
<var>associated element</var> as the associated element and <var>behavior</var> as the scroll behavior.
15291500

15301501
</ol>
@@ -1571,13 +1542,7 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
15711542
<li><p>If <var>position</var> is the same as <var>box</var>'s current scroll position, and <var>box</var> does not have an ongoing
15721543
<a href="#concept-smooth-scroll" title="concept-smooth-scroll">smooth scroll</a>, abort these steps.
15731544

1574-
<li><p>Let <var>task</var> be these steps:
1575-
<ol>
1576-
<li><p><a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">Fire an event</a> named
1577-
<code title="">scroll</code> at the element.</li>
1578-
</ol>
1579-
1580-
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>box</var> to <var>position</var>, with the set of steps <var>task</var>,
1545+
<li><p><a href="#perform-a-scroll">Perform a scroll</a> of <var>box</var> to <var>position</var>,
15811546
<var>element</var> as the associated element and <var>behavior</var> as the scroll behavior.
15821547

15831548
</ol>
@@ -1894,25 +1859,70 @@ <h2 id="events"><span class="secno">13 </span>Events</h2>
18941859

18951860
<h3 id="resizing-viewports"><span class="secno">13.1 </span>Resizing viewports</h3>
18961861

1897-
<p>Whenever a <a href="#viewport">viewport</a> has its width or height changed (e.g. as a result of the user resizing the browser window, or changing the <a href="#page-zoom">page
1898-
zoom</a> scale factor, or an <code title="">iframe</code> element's dimensions are changed), the user agent must <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">queue a task</a>
1899-
to <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">fire an event</a> event named
1900-
<code title="">resize</code> at the <code class="external" data-anolis-spec="html"><a href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a></code> object associated with that
1901-
<a href="#viewport">viewport</a>. If such a resize is ongoing over a period of time, the user agent must <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" title="queue a task">queue</a> that
1902-
task at a user-agent-defined interval while the resize is ongoing. <!--fingerprint--> <!-- e.g. if you change the width of an iframe with a transition -->
1862+
<p>When asked to <dfn id="run-the-resize-steps">run the resize steps</dfn> for a <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> <var>doc</var>, run these steps:
1863+
1864+
<ol>
1865+
1866+
<li><p>If <var>doc</var>'s <a href="#viewport">viewport</a> has had its width or height changed
1867+
(e.g. as a result of the user resizing the browser window,
1868+
or changing the <a href="#page-zoom">page zoom</a> scale factor,
1869+
or an <code title="">iframe</code> element's dimensions are changed)
1870+
since the last time these steps were run,
1871+
<a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">fire an event</a> named <code title="">resize</code>
1872+
at the <code class="external" data-anolis-spec="html"><a href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a></code> object associated with <var>doc</var>.
1873+
1874+
</ol>
1875+
19031876

19041877
<h3 id="scrolling-0"><span class="secno">13.2 </span>Scrolling</h3>
19051878

1906-
<p>Whenever a <a href="#viewport">viewport</a> gets scrolled in response to user interaction, the user agent must <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">queue a task</a> to
1907-
<a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-fire" title="concept-event-fire">fire an event</a> named
1908-
<code title="">scroll</code> that bubbles at the <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> object associated with that <a href="#viewport">viewport</a>. If such a scroll is
1909-
ongoing over a period of time, the user agent must <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" title="queue a task">queue</a> that task at a user-agent-defined interval
1910-
while the scroll is ongoing. <!--fingerprint-->
1879+
<p>Each <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> has an associated list of <dfn id="pending-scroll-event-targets">pending scroll event targets</dfn>, initially empty.
1880+
1881+
<p>Whenever a <a href="#viewport">viewport</a> gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:
1882+
1883+
<ol>
1884+
1885+
<li><p>Let <var>doc</var> be the <a href="#viewport">viewport</a>'s associated <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code>.
1886+
1887+
<li><p>If <var>doc</var> is already in <var>doc</var>'s <a href="#pending-scroll-event-targets">pending scroll event targets</a>, abort these steps.
1888+
1889+
<li><p>Append <var>doc</var> to <var>doc</var>'s <a href="#pending-scroll-event-targets">pending scroll event targets</a>.
19111890

1912-
<p>Whenever an element gets scrolled in response to user interaction, the user agent must <a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">queue a task</a> to
1913-
<a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">fire an event</a> named
1914-
<code title="">scroll</code> at the element. If such a scroll is ongoing over a period of time, the user agent must
1915-
<a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" title="queue a task">queue</a> that task at a user-agent-defined interval while the scroll is ongoing. <!--fingerprint-->
1891+
</ol>
1892+
1893+
<p>Whenever an element gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:
1894+
1895+
<ol>
1896+
1897+
<li><p>Let <var>doc</var> be the element's <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-node-document" title="concept-node-document">node document</a>.
1898+
1899+
<li><p>If the element is already in <var>doc</var>'s <a href="#pending-scroll-event-targets">pending scroll event targets</a>, abort these steps.
1900+
1901+
<li><p>Append the element to <var>doc</var>'s <a href="#pending-scroll-event-targets">pending scroll event targets</a>.
1902+
1903+
</ol>
1904+
1905+
<p>When asked to <dfn id="run-the-scroll-steps">run the scroll steps</dfn> for a <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code> <var>doc</var>, run these steps:
1906+
1907+
<ol>
1908+
1909+
<li>
1910+
1911+
<p>For each item <var>target</var> in <var>doc</var>'s <a href="#pending-scroll-event-targets">pending scroll event targets</a>,
1912+
in the order they were added to the list, run these substeps:
1913+
1914+
<ol>
1915+
1916+
<li><p>If <var>target</var> is a <code class="external" data-anolis-spec="dom"><a href="https://dom.spec.whatwg.org/#document">Document</a></code>,
1917+
<a class="external" data-anolis-spec="html" href="https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-fire" title="concept-event-fire">fire an event</a> named <code title="">scroll</code> that bubbles at <var>target</var>.
1918+
1919+
<li><p>Otherwise, <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-fire" title="concept-event-fire">fire an event</a> named <code title="">scroll</code> at <var>target</var>.
1920+
1921+
</ol>
1922+
1923+
<li><p>Empty <var>doc</var>'s <a href="#pending-scroll-event-targets">pending scroll event targets</a>.
1924+
1925+
</ol>
19161926

19171927

19181928
<h2 id="css-properties"><span class="secno">14 </span>CSS properties</h2>

0 commit comments

Comments
 (0)