Skip to content

Commit 80d1144

Browse files
author
Simon Pieters
committed
[cssom-view] Sync MediaQueryList with animation frames. Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=26516 
1 parent 18b559f commit 80d1144

2 files changed

Lines changed: 36 additions & 20 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 19 additions & 11 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 28 November 2014</h2>
19+
<h2 class="no-num no-toc" id="w3c-doctype">Editor's Draft 2 December 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 28 November 2014 Editor's Draft of CSSOM View. Please send
86+
<p>This is the 2 December 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>)
@@ -861,20 +861,28 @@ <h3 id="the-mediaquerylist-interface"><span class="secno">5.2 </span>The <code t
861861
<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
862862
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>
863863

864-
<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>
864+
<!--XXX update the matches state when flushing layout (offsetWidth et al), without firing a change event. -->
865+
866+
<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:
865867

866868
<ol>
867869

868-
<li><p>Let <var>target</var> be the <code><a href="#mediaquerylist">MediaQueryList</a></code> object.</li>
870+
<li>
871+
872+
<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>,
873+
in the order they were created, oldest first, run these substeps:
869874

870-
<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>
871-
using the <code><a href="#mediaquerylistevent">MediaQueryListEvent</a></code> interface,
872-
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>,
873-
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,
874-
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>,
875-
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>
875+
<ol>
876+
877+
<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,
878+
<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>
879+
using the <code><a href="#mediaquerylistevent">MediaQueryListEvent</a></code> interface,
880+
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>,
881+
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,
882+
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>,
883+
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-->
876884

877-
<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>
885+
</ol>
878886

879887
</ol>
880888

‎cssom-view/Overview.src.html‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -817,20 +817,28 @@ <h3>The <code title>MediaQueryList</code> Interface</h3>
817817
<p>A <code>MediaQueryList</code> object has an associated <dfn title=concept-MediaQueryList-matches>matches state</dfn> which is
818818
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>
819819

820-
<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>
820+
<!--XXX update the matches state when flushing layout (offsetWidth et al), without firing a change event. -->
821+
822+
<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:
821823

822824
<ol>
823825

824-
<li><p>Let <var>target</var> be the <code>MediaQueryList</code> object.</p></li>
826+
<li>
827+
828+
<p>For each <code>MediaQueryList</code> object <var>target</var> that has <var>doc</var> as its <span title=concept-MediaQueryList-document>document</span>,
829+
in the order they were created, oldest first, run these substeps:
825830

826-
<li><p>Let <var>event</var> be a new <span data-anolis-spec=dom title=concept-event>event</span>
827-
using the <code>MediaQueryListEvent</code> interface,
828-
with its <code data-anolis-spec=dom title=dom-Event-type>type</code> attribute initialized to <code title>change</code>,
829-
its <code data-anolis-spec=dom title=dom-Event-isTrusted>isTrusted</code> attribute initialized to true,
830-
its <code title=dom-MediaQueryListEvent-media>media</code> attribute initialized to <var>target</var>'s <span title=concept-MediaQueryList-media>media</span>,
831-
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>
831+
<ol>
832+
833+
<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,
834+
<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>
835+
using the <code>MediaQueryListEvent</code> interface,
836+
with its <code data-anolis-spec=dom title=dom-Event-type>type</code> attribute initialized to <code title>change</code>,
837+
its <code data-anolis-spec=dom title=dom-Event-isTrusted>isTrusted</code> attribute initialized to true,
838+
its <code title=dom-MediaQueryListEvent-media>media</code> attribute initialized to <var>target</var>'s <span title=concept-MediaQueryList-media>media</span>,
839+
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-->
832840

833-
<li><p><span data-anolis-spec=dom title=concept-event-dispatch>Dispatch</span> <var>event</var> to <var>target</var>.</p></li>
841+
</ol>
834842

835843
</ol>
836844

0 commit comments

Comments
 (0)