[cssom-view] Sync MediaQueryList with animation frames. Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=26516

Tue, 02 Dec 2014 16:00:47 +0100

author
Simon Pieters <simonp@opera.com>
date
Tue, 02 Dec 2014 16:00:47 +0100
changeset 14827
c2574d95256b
parent 14826
5003949ad57d
child 14828
cde2e00e2a4f

[cssom-view] Sync MediaQueryList with animation frames. Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=26516

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	Sat Nov 29 21:07:51 2014 -0800
     1.2 +++ b/cssom-view/Overview.html	Tue Dec 02 16:00:47 2014 +0100
     1.3 @@ -16,7 +16,7 @@
     1.4  
     1.5   <h1>CSSOM View Module</h1>
     1.6  
     1.7 - <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 28 November 2014</h2>
     1.8 + <h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 2 December 2014</h2>
     1.9  
    1.10   <dl>
    1.11  
    1.12 @@ -83,7 +83,7 @@
    1.13  can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
    1.14  index at http://www.w3.org/TR/.</a></em>
    1.15  
    1.16 -<p>This is the 28 November 2014 Editor's Draft of CSSOM View. Please send
    1.17 +<p>This is the 2 December 2014 Editor's Draft of CSSOM View. Please send
    1.18  comments to
    1.19  <a href="mailto:www-style@w3.org?subject=%5Bcssom-view%5D%20">www-style@w3.org</a>
    1.20  (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
    1.21 @@ -861,20 +861,28 @@
    1.22  <p>A <code><a href="#mediaquerylist">MediaQueryList</a></code> object has an associated <dfn id="concept-mediaquerylist-matches" title="concept-MediaQueryList-matches">matches state</dfn> which is
    1.23  true if the associated <a href="#media-query-list">media query list</a> matches the state of the <a href="#concept-mediaquerylist-document" title="concept-MediaQueryList-document">document</a>, and false otherwise.</p>
    1.24  
    1.25 -<p>If the associated <a href="#media-query-list">media query list</a> changes in evaluation, 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 run these steps:</p>
    1.26 +<!--XXX update the matches state when flushing layout (offsetWidth et al), without firing a change event. -->
    1.27 +
    1.28 +<p>When asked to <dfn id="evaluate-media-queries-and-report-changes">evaluate media queries and report changes</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:
    1.29  
    1.30  <ol>
    1.31  
    1.32 - <li><p>Let <var>target</var> be the <code><a href="#mediaquerylist">MediaQueryList</a></code> object.</li>
    1.33 + <li>
    1.34  
    1.35 - <li><p>Let <var>event</var> be a new <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event" title="concept-event">event</a>
    1.36 - using the <code><a href="#mediaquerylistevent">MediaQueryListEvent</a></code> interface,
    1.37 - with its <code class="external" data-anolis-spec="dom" title="dom-Event-type"><a href="https://dom.spec.whatwg.org/#dom-event-type">type</a></code> attribute initialized to <code title="">change</code>,
    1.38 - its <code class="external" data-anolis-spec="dom" title="dom-Event-isTrusted"><a href="https://dom.spec.whatwg.org/#dom-event-istrusted">isTrusted</a></code> attribute initialized to true,
    1.39 - its <code title="dom-MediaQueryListEvent-media"><a href="#dom-mediaquerylistevent-media">media</a></code> attribute initialized to <var>target</var>'s <a href="#concept-mediaquerylist-media" title="concept-MediaQueryList-media">media</a>,
    1.40 - and its <code title="dom-MediaQueryListEvent-matches"><a href="#dom-mediaquerylistevent-matches">matches</a></code> attribute initialized to <var>target</var>'s <a href="#concept-mediaquerylist-matches" title="concept-MediaQueryList-matches">matches state</a>. <!--fingerprint--></li>
    1.41 +  <p>For each <code><a href="#mediaquerylist">MediaQueryList</a></code> object <var>target</var> that has <var>doc</var> as its <a href="#concept-mediaquerylist-document" title="concept-MediaQueryList-document">document</a>,
    1.42 +  in the order they were created, oldest first, run these substeps:
    1.43  
    1.44 - <li><p><a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-dispatch" title="concept-event-dispatch">Dispatch</a> <var>event</var> to <var>target</var>.</li>
    1.45 +  <ol>
    1.46 +
    1.47 +   <li><p>If <var>target</var>'s <a href="#concept-mediaquerylist-matches" title="concept-MediaQueryList-matches">matches state</a> has changed since the last time these steps were run,
    1.48 +   <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event-dispatch" title="concept-event-dispatch">dispatch</a> a new <a class="external" data-anolis-spec="dom" href="https://dom.spec.whatwg.org/#concept-event" title="concept-event">event</a> to <var>target</var>
    1.49 +   using the <code><a href="#mediaquerylistevent">MediaQueryListEvent</a></code> interface,
    1.50 +   with its <code class="external" data-anolis-spec="dom" title="dom-Event-type"><a href="https://dom.spec.whatwg.org/#dom-event-type">type</a></code> attribute initialized to <code title="">change</code>,
    1.51 +   its <code class="external" data-anolis-spec="dom" title="dom-Event-isTrusted"><a href="https://dom.spec.whatwg.org/#dom-event-istrusted">isTrusted</a></code> attribute initialized to true,
    1.52 +   its <code title="dom-MediaQueryListEvent-media"><a href="#dom-mediaquerylistevent-media">media</a></code> attribute initialized to <var>target</var>'s <a href="#concept-mediaquerylist-media" title="concept-MediaQueryList-media">media</a>,
    1.53 +   and its <code title="dom-MediaQueryListEvent-matches"><a href="#dom-mediaquerylistevent-matches">matches</a></code> attribute initialized to <var>target</var>'s <a href="#concept-mediaquerylist-matches" title="concept-MediaQueryList-matches">matches state</a>. <!--fingerprint-->
    1.54 +
    1.55 +  </ol>
    1.56  
    1.57  </ol>
    1.58  
     2.1 --- a/cssom-view/Overview.src.html	Sat Nov 29 21:07:51 2014 -0800
     2.2 +++ b/cssom-view/Overview.src.html	Tue Dec 02 16:00:47 2014 +0100
     2.3 @@ -817,20 +817,28 @@
     2.4  <p>A <code>MediaQueryList</code> object has an associated <dfn title=concept-MediaQueryList-matches>matches state</dfn> which is
     2.5  true if the associated <span>media query list</span> matches the state of the <span title=concept-MediaQueryList-document>document</span>, and false otherwise.</p>
     2.6  
     2.7 -<p>If the associated <span>media query list</span> changes in evaluation, the user agent must <span data-anolis-spec=html>queue a task</span> to run these steps:</p>
     2.8 +<!--XXX update the matches state when flushing layout (offsetWidth et al), without firing a change event. -->
     2.9 +
    2.10 +<p>When asked to <dfn>evaluate media queries and report changes</dfn> for a <code data-anolis-spec=dom>Document</code> <var>doc</var>, run these steps:
    2.11  
    2.12  <ol>
    2.13  
    2.14 - <li><p>Let <var>target</var> be the <code>MediaQueryList</code> object.</p></li>
    2.15 + <li>
    2.16  
    2.17 - <li><p>Let <var>event</var> be a new <span data-anolis-spec=dom title=concept-event>event</span>
    2.18 - using the <code>MediaQueryListEvent</code> interface,
    2.19 - with its <code data-anolis-spec=dom title=dom-Event-type>type</code> attribute initialized to <code title>change</code>,
    2.20 - its <code data-anolis-spec=dom title=dom-Event-isTrusted>isTrusted</code> attribute initialized to true,
    2.21 - its <code title=dom-MediaQueryListEvent-media>media</code> attribute initialized to <var>target</var>'s <span title=concept-MediaQueryList-media>media</span>,
    2.22 - and its <code title=dom-MediaQueryListEvent-matches>matches</code> attribute initialized to <var>target</var>'s <span title=concept-MediaQueryList-matches>matches state</span>. <!--fingerprint--></p></li>
    2.23 +  <p>For each <code>MediaQueryList</code> object <var>target</var> that has <var>doc</var> as its <span title=concept-MediaQueryList-document>document</span>,
    2.24 +  in the order they were created, oldest first, run these substeps:
    2.25  
    2.26 - <li><p><span data-anolis-spec=dom title=concept-event-dispatch>Dispatch</span> <var>event</var> to <var>target</var>.</p></li>
    2.27 +  <ol>
    2.28 +
    2.29 +   <li><p>If <var>target</var>'s <span title=concept-MediaQueryList-matches>matches state</span> has changed since the last time these steps were run,
    2.30 +   <span data-anolis-spec=dom title=concept-event-dispatch>dispatch</span> a new <span data-anolis-spec=dom title=concept-event>event</span> to <var>target</var>
    2.31 +   using the <code>MediaQueryListEvent</code> interface,
    2.32 +   with its <code data-anolis-spec=dom title=dom-Event-type>type</code> attribute initialized to <code title>change</code>,
    2.33 +   its <code data-anolis-spec=dom title=dom-Event-isTrusted>isTrusted</code> attribute initialized to true,
    2.34 +   its <code title=dom-MediaQueryListEvent-media>media</code> attribute initialized to <var>target</var>'s <span title=concept-MediaQueryList-media>media</span>,
    2.35 +   and its <code title=dom-MediaQueryListEvent-matches>matches</code> attribute initialized to <var>target</var>'s <span title=concept-MediaQueryList-matches>matches state</span>. <!--fingerprint-->
    2.36 +
    2.37 +  </ol>
    2.38  
    2.39  </ol>
    2.40  

mercurial