Skip to content

Commit bed3a80

Browse files
annevkannevk
committed
ooh, mediaquerylist
1 parent 4fb1150 commit bed3a80

2 files changed

Lines changed: 153 additions & 282 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 85 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@
2727

2828
<h1 id=cssom-view-module>CSSOM View Module</h1>
2929

30-
<h2 class="no-num no-toc" id=w3c-doctype>Editor's Draft 13 August 2010</h2>
30+
<h2 class="no-num no-toc" id=w3c-doctype>Editor's Draft 25 August 2010</h2>
3131

3232
<dl>
3333
<dt>This Version:
3434

3535
<dd><a
36-
href="http://www.w3.org/TR/2010/ED-cssom-view-20100813/">http://www.w3.org/TR/2010/ED-cssom-view-20100813/</a>
36+
href="http://www.w3.org/TR/2010/ED-cssom-view-20100825/">http://www.w3.org/TR/2010/ED-cssom-view-20100825/</a>
3737

3838
<dt>Latest Version:
3939

@@ -142,8 +142,8 @@ <h2 class="no-num no-toc" id=toc>Table of Contents</h2>
142142
<li><a href="#extensions-to-the-window-interface"><span class=secno>3.
143143
</span>Extensions to the <code title="">Window</code> Interface</a>
144144
<ul class=toc>
145-
<li><a href="#the-stylemedia-interface"><span class=secno>3.1.
146-
</span>The <code title="">StyleMedia</code> Interface</a>
145+
<li><a href="#the-mediaquerylist-interface"><span class=secno>3.1.
146+
</span>The <code title="">MediaQueryList</code> Interface</a>
147147

148148
<li><a href="#the-screen-interface"><span class=secno>3.2. </span>The
149149
<code title="">Screen</code> Interface</a>
@@ -292,15 +292,15 @@ <h3 id=css-pixels><span class=secno>2.3. </span>CSS pixels</h3>
292292
href="#ref-css21">CSS21</a></cite>]
293293

294294
<p class=note>This does not apply to e.g. <a
295-
href="#dom-stylemedia-matchmedia"><code
296-
title=dom-StyleMedia-matchMedia>matchMedia()</code></a> as the units are
295+
href="#dom-window-matchmedia"><code
296+
title=dom-Window-matchMedia>matchMedia()</code></a> as the units are
297297
explicitly given there.
298298

299299
<h2 id=extensions-to-the-window-interface><span class=secno>3.
300300
</span>Extensions to the <code title="">Window</code> Interface</h2>
301301

302302
<pre class=idl>[Supplemental] interface <a href="#window">Window</a> {
303-
readonly attribute <a href="#stylemedia">StyleMedia</a> <a href="#dom-window-stylemedia" title=dom-Window-styleMedia>styleMedia</a>;
303+
<a href="#mediaquerylist">MediaQueryList</a> <span>matchMedia</span>(DOMString <var title="">media_query_list</var>);
304304
readonly attribute <a href="#screen">Screen</a> <a href="#dom-window-screen" title=dom-Window-screen>screen</a>;
305305

306306
// viewport
@@ -319,24 +319,35 @@ <h2 id=extensions-to-the-window-interface><span class=secno>3.
319319
readonly attribute long <a href="#dom-window-outerheight">outerHeight</a>;
320320
};</pre>
321321

322-
<p>The <dfn id=dom-window-stylemedia
323-
title=dom-Window-styleMedia><code>styleMedia</code></dfn> attribute <em
324-
class=ct>must</em> return the <a
325-
href="#stylemedia"><code>StyleMedia</code></a> object associated with the
326-
<a href="#window"><code>Window</code></a> object. It always returns the
327-
same object.
322+
<p>When the <dfn id=dom-window-matchmedia
323+
title=dom-Window-matchMedia><code>matchMedia(<var
324+
title="">media_query_list</var>)</code></dfn> method is invoked these
325+
steps must be run:
326+
327+
<ol>
328+
<li>
329+
<p>Let <var title="">parsed_media_query_list</var> be the result of <a
330+
href="#parse-a-list-of-media-queries" title="parse a list of media
331+
queries">parsing</a> <var title="">media_query_list</var>.
332+
333+
<li>
334+
<p>Return a <em>new</em> <a
335+
href="#mediaquerylist"><code>MediaQueryList</code></a> object,
336+
associated with the <a href="#window"><code>Window</code></a> object,
337+
with <var title="">parsed_media_query_list</var> as its associated media
338+
query list.
339+
</ol>
328340

329341
<p>The <dfn id=dom-window-screen
330342
title=dom-Window-screen><code>screen</code></dfn> attribute <em
331343
class=ct>must</em> return the <a href="#screen"><code>Screen</code></a>
332344
object associated with the <a href="#window"><code>Window</code></a>
333345
object. It always returns the same object.
334346

335-
<p class=note>Accessing <a href="#dom-window-stylemedia"><code
336-
title=dom-Window-styleMedia>styleMedia</code></a> or <a
337-
href="#dom-window-screen"><code title=dom-Window-screen>screen</code></a>
338-
through a <code>WindowProxy</code> object might yield different results
339-
when the document is navigated.
347+
<p class=note>Accessing <a href="#dom-window-screen"><code
348+
title=dom-Window-screen>screen</code></a> through a
349+
<code>WindowProxy</code> object might yield different results when the <a
350+
href="#document"><code>Document</code></a> is navigated.
340351

341352
<p>The <dfn id=dom-window-innerwidth><code>innerWidth</code></dfn>
342353
attribute <em class=ct>must</em> return the <a
@@ -469,127 +480,21 @@ <h2 id=extensions-to-the-window-interface><span class=secno>3.
469480
If there is no client window this attribute <em class=ct>must</em> return
470481
zero.
471482

472-
<h3 id=the-stylemedia-interface><span class=secno>3.1. </span>The <code
473-
title="">StyleMedia</code> Interface</h3>
474-
475-
<pre class=idl>interface <dfn id=stylemedia>StyleMedia</dfn> {
476-
readonly attribute DOMString <a href="#dom-stylemedia-type" title=dom-StyleMedia-type>type</a>;
477-
boolean <a href="#dom-stylemedia-matchmedia" title=dom-StyleMedia-matchMedia>matchMedia</a>(DOMString <var title="">mq_list</var>);
478-
479-
void <a href="#dom-stylemedia-addmedialistener" title=dom-StyleMedia-addMediaListener>addMediaListener</a>(DOMString <var title="">mq_list</var>, <a href="#booleancallback">BooleanCallback</a> <var title="">mq_callback</var>);
480-
void <a href="#dom-stylemedia-removemedialistener" title=dom-StyleMedia-removeMediaListener>removeMediaListener</a>(DOMString <var title="">mq_list</var>, <a href="#booleancallback">BooleanCallback</a> <var title="">mq_callback</var>);
481-
};
482-
483-
[Callback=FunctionOnly, NoInterfaceObject]
484-
interface <dfn id=booleancallback>BooleanCallback</dfn> {
485-
void <span>handleEvent</span>(boolean <var title="">arg</var>);
486-
};</pre>
487-
488-
<p>The <dfn id=dom-stylemedia-type
489-
title=dom-StyleMedia-type><code>type</code></dfn> attribute <em
490-
class=ct>must</em> return the string that represents the media type used
491-
for rendering the <a href="#document"><code>Document</code></a>. The media
492-
types are defined by CSS 2.1 (<code title="">screen</code>,
493-
<code>print</code>, et cetera). [<cite><a
494-
href="#ref-css21">CSS21</a></cite>]
495-
496-
<div class=example>
497-
<p>The following snippet determines whether the page is rendered using the
498-
projection media type:</p>
499-
500-
<pre><code>var isProjection = media.type == "projection"</code></pre>
501-
</div>
502-
503-
<p>The <dfn id=dom-stylemedia-matchmedia
504-
title=dom-StyleMedia-matchMedia><code>matchMedia(<var
505-
title="">mq_list</var>)</code></dfn> method <em class=ct>must</em> run
506-
these steps:
507-
508-
<ol>
509-
<li>
510-
<p>Let <var title="">parsed_mq_list</var> be the result of <a
511-
href="#parse-a-list-of-media-queries" title="parse a list of media
512-
queries">parsing</a> <var title="">mq_list</var>.
513-
514-
<li>
515-
<p>Return true if <var title="">parsed_mq_list</var> matches the state of
516-
the rendered <a href="#document"><code>Document</code></a> and false if
517-
it does not.
518-
</ol>
519-
520-
<div class=example>
521-
<p>The following snippet determines whether the device is a color device:</p>
522-
523-
<pre><code>var isColorDevice = styleMedia.matchMedia("(color)")</code></pre>
524-
</div>
525-
526-
<p>Each <a href="#window"><code>Window</code></a> has an associated ordered
527-
<dfn id=list-of-media-listeners>list of media listeners</dfn>. Each
528-
listener consists of a list of media queries and a callback.
529-
530-
<p class=note>Due to the rules for <a
531-
href="#dom-stylemedia-addmedialistener"><code
532-
title=dom-StyleMedia-addMediaListener>addMediaListener()</code></a> below
533-
each listener is unique. Lists of media queries and callbacks are not
534-
necessarily unique.
535-
536-
<p>The <dfn id=dom-stylemedia-addmedialistener
537-
title=dom-StyleMedia-addMediaListener><code>addMediaListener(<var
538-
title="">mq_list</var>, <var title="">mq_callback</var>)</code></dfn>
539-
method <em class=ct>must</em> run these steps:</p>
540-
<!-- based on dom-MediaList-appendMedium -->
541-
542-
<ol>
543-
<li>
544-
<p>Let <var title="">parsed_mq_list</var> be the result of <a
545-
href="#parse-a-list-of-media-queries" title="parse a list of media
546-
queries">parsing</a> <var title="">mq_list</var>.
547-
548-
<li>
549-
<p>If <a href="#compare-lists-of-media-queries" title="compare lists of
550-
media queries">comparing</a> <var title="">parsed_mq_list</var> with any
551-
of the list of media queries in the <a
552-
href="#list-of-media-listeners">list of media listeners</a> returns true
553-
<em>and</em> the associated callback of that media query is the same as
554-
<var title="">mq_callback</var>, terminate these steps.
555-
556-
<li>
557-
<p>Append the tuple of <var title="">parsed_mq_list</var> and <var
558-
title="">mq_callback</var> to the <a
559-
href="#list-of-media-listeners">list of media listeners</a>.
560-
</ol>
561-
562-
<p>The <dfn id=dom-stylemedia-removemedialistener
563-
title=dom-StyleMedia-removeMediaListener><code>removeMediaListener(<var
564-
title="">mq_list</var>, <var title="">mq_callback</var>)</code></dfn>
565-
method <em class=ct>must</em> run these steps:
566-
567-
<ol>
568-
<li>
569-
<p>Let <var title="">parsed_mq_list</var> be the result of <a
570-
href="#parse-a-list-of-media-queries" title="parse a list of media
571-
queries">parsing</a> <var title="">mq_list</var>.
572-
573-
<li>
574-
<p>If <a href="#compare-lists-of-media-queries" title="compare lists of
575-
media queries">comparing</a> <var title="">parsed_mq_list</var> with any
576-
of the media queries in the <a href="#list-of-media-listeners">list of
577-
media listeners</a> returns true <em>and</em> the associated callback of
578-
that media query is the same as <var title="">mq_callback</var>, remove
579-
the tuple of <var title="">parsed_mq_list</var> and <var
580-
title="">mq_callback</var> from the <a
581-
href="#list-of-media-listeners">list of media listeners</a>.
582-
</ol>
583-
584-
<p>If one or more lists of media queries in the <a
585-
href="#list-of-media-listeners">list of media listeners</a> changes in
586-
evaluation then for each list of media queries of which the evaluation
587-
changes, in the order of the <a href="#list-of-media-listeners">list of
588-
media listeners</a>, <a href="#queue-a-task">queue a task</a> that invokes
589-
the associated callback, passing as argument whether the list of media
590-
queries matches the state of the rendered <a
591-
href="#document"><code>Document</code></a> at the time the <a
592-
href="#task">task</a> was <a href="#queue-a-task" title="queue a
483+
<h3 id=the-mediaquerylist-interface><span class=secno>3.1. </span>The <code
484+
title="">MediaQueryList</code> Interface</h3>
485+
486+
<p>A <a href="#mediaquerylist"><code>MediaQueryList</code></a> object has
487+
an associated media query list set on creation and an associated <dfn
488+
id=list-of-media-query-list-listeners>list of media query list
489+
listeners</dfn>, which is initially empty.
490+
491+
<p>If the associated media query list changes in evaluation then, for each
492+
listener in the <a href="#list-of-media-query-list-listeners">list of
493+
media query list listeners</a> &mdash; in appending order, <a
494+
href="#queue-a-task">queue a task</a> that invokes the listener, passing
495+
as argument whether the associated list of media queries matches the state
496+
of the rendered <a href="#document"><code>Document</code></a> at the time
497+
the <a href="#task">task</a> was <a href="#queue-a-task" title="queue a
593498
task">queued</a>.
594499

595500
<div class=example>
@@ -602,21 +507,47 @@ <h3 id=the-stylemedia-interface><span class=secno>3.1. </span>The <code
602507
else
603508
&hellip;
604509
}
605-
styleMedia.addMediaListener("(orientation:landscape)", handleOrientationChange)</code></pre>
510+
var mql = matchMedia("(orientation:landscape)")
511+
mql.addListener(handleOrientationChange)</code></pre>
512+
</div>
606513

607-
<p>A more generic handler for media query changes could be written as
608-
follows:</p>
514+
<pre class=idl>interface <dfn id=mediaquerylist>MediaQueryList</dfn> {
515+
readonly attribute DOMString <a href="#dom-MediaQueryList-media" title=dom-MediaQueryList-media>media</a>;
516+
readonly attribute DOMString <a href="#dom-MediaQueryList-matches" title=dom-MediaQueryList-matches>matches</a>;
517+
void <a href="#dom-mediaquerylist-addlistener" title=dom-MediaQueryList-addListener>addListener</a>(<a href="#mediaquerylistlistener">MediaQueryListListener</a> <var title="">listener</var>);
518+
void <a href="#dom-mediaquerylist-removelistener" title=dom-MediaQueryList-removeListener>removeListener</a>(<a href="#mediaquerylistlistener">MediaQueryListListener</a> <var title="">listener</var>);
519+
};
609520

610-
<pre><code>function handleMediaQueryChange(query, matches) {
611-
&hellip;
612-
}
613-
function addMediaListener(query) {
614-
styleMedia.addMediaListener(
615-
query,
616-
function(matches) { handleMediaQueryChange(query, matches) }
617-
)
618-
}</code></pre>
619-
</div>
521+
[Callback=FunctionOnly, NoInterfaceObject]
522+
interface <dfn id=mediaquerylistlistener>MediaQueryListListener</dfn> {
523+
void <span>handleChange</span>(boolean <var title="">matches</var>);
524+
};</pre>
525+
526+
<p>The <dfn id=dom-MediaQueryList-media
527+
title=dom-MediaQueryList-media><code>media</code></dfn> <em
528+
class=ct>must</em> return the <span title="serialize a media query
529+
list">serialized</span> form of the associated media query list.
530+
531+
<p>The <dfn id=dom-MediaQueryList-matches
532+
title=dom-MediaQueryList-matches><code>matches</code></dfn> <em
533+
class=ct>must</em> return true if the associated media query list matches
534+
the state of the rendered <a href="#document"><code>Document</code></a>
535+
and false if it does not.
536+
537+
<p>When the <dfn id=dom-mediaquerylist-addlistener
538+
title=dom-MediaQueryList-addListener><code>addListener(<var
539+
title="">listener</var>)</code></dfn> is invoked <var
540+
title="">listener</var> <em class=ct>must</em> be appended to the <a
541+
href="#list-of-media-query-list-listeners">list of media query list
542+
listeners</a>.
543+
544+
<p>When the <dfn id=dom-mediaquerylist-removelistener
545+
title=dom-MediaQueryList-removeListener><code>removeListener(<var
546+
title="">listener</var>)</code></dfn> is invoked the last listener in the
547+
<a href="#list-of-media-query-list-listeners">list of media query list
548+
listeners</a> that matches <var title="">listener</var> <e class=ct>must
549+
be removed from the <a href="#list-of-media-query-list-listeners">list of
550+
media query list listeners</a>.</e>
620551

621552
<h3 id=the-screen-interface><span class=secno>3.2. </span>The <code
622553
title="">Screen</code> Interface</h3>
@@ -1462,7 +1393,8 @@ <h2 id=extensions-to-the-mouseevent-interface><span class=secno>8.
14621393
<p>The <dfn id=dom-mouseevent-offsety><code>offsetY</code></dfn> attribute
14631394
<em class=ct>must</em> return the y-coordinate of the position where the
14641395
event occurred relative to the origin of the <a
1465-
href="#padding-edge">padding edge</a> of the target node.
1396+
href="#padding-edge">padding edge</a> of the target node.</p>
1397+
<!-- XXX layerX/layerY -->
14661398

14671399
<h2 id=rectangles><span class=secno>9. </span>Rectangles</h2>
14681400

0 commit comments

Comments
 (0)