Skip to content

Commit aedd428

Browse files
annevkannevk
committed
add the text for addMediumListener and removeMediumListener
1 parent 1aca8fc commit aedd428

2 files changed

Lines changed: 224 additions & 47 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 119 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -257,8 +257,15 @@ <h3 id=terminology><span class=secno>2.2. </span>Terminology</h3>
257257
<p><dfn id=mouseevent><code>MouseEvent</code></dfn> is defined in DOM Level
258258
2 Events. [<cite><a href="#ref-dom2events">DOM2Events</a></cite>]
259259

260-
<p><dfn id=html-element>HTML element</dfn>, <dfn
261-
id=htmlelement><code>HTMLElement</code></dfn>, and <dfn
260+
<p> <dfn id=compare-media-queries>Compare media queries</dfn>, <dfn
261+
id=parse-a-media-query>parse a media query</dfn>, and <dfn
262+
id=serialize-a-media-query>serialize a media query</dfn> are defined by
263+
the CSSOM. [<cite><a href="#ref-cssom">CSSOM</a></cite>]
264+
265+
<p> <dfn id=html-element>HTML element</dfn>, <dfn
266+
id=htmlelement><code>HTMLElement</code></dfn>, <dfn
267+
id=queue-a-task><code>queue a task</code></dfn>, <dfn
268+
id=task><code>task</code></dfn>, and <dfn
262269
id=window><code>Window</code></dfn> are defined by HTML5. [<cite><a
263270
href="#ref-html5">HTML5</a></cite>]
264271

@@ -267,14 +274,14 @@ <h3 id=terminology><span class=secno>2.2. </span>Terminology</h3>
267274
child of the root <a href="#html-element">HTML element</a>
268275
<code>html</code>.
269276

270-
<p>The terms <dfn id=content-edge>content edge</dfn>, <dfn
271-
id=padding-edge>padding edge</dfn>, <dfn id=border-edge>border edge</dfn>,
272-
and <dfn id=canvas>canvas</dfn> are defined by CSS 2.1. [<cite><a
277+
<p><dfn id=content-edge>Content edge</dfn>, <dfn id=padding-edge>padding
278+
edge</dfn>, <dfn id=border-edge>border edge</dfn>, and <dfn
279+
id=canvas>canvas</dfn> are defined by CSS 2.1. [<cite><a
273280
href="#ref-css21">CSS21</a></cite>]
274281

275-
<p>The terms <dfn id=viewport>viewport</dfn>, <dfn
282+
<p><dfn id=viewport>Viewport</dfn> and <dfn
276283
id=initial-containing-block>initial containing block</dfn> are defined by
277-
CSS 2.1 unless there's an ancestor <code>foreignObject</code> element in
284+
CSS 2.1 unless there is an ancestor <code>foreignObject</code> element in
278285
the <code>http://www.w3.org/2000/svg</code> namespace in which case that
279286
element acts as viewport and initial containing block. [<cite><a
280287
href="#ref-css21">CSS21</a></cite>] [<cite><a
@@ -477,23 +484,16 @@ <h3 id=the-stylemedia-interface><span class=secno>4.1. </span>The <code
477484

478485
<pre class=idl>interface <dfn id=stylemedia>StyleMedia</dfn> {
479486
readonly attribute DOMString <a href="#dom-stylemedia-type" title=dom-StyleMedia-type>type</a>;
480-
boolean <a href="#dom-stylemedia-matchmedium" title=dom-StyleMedia-matchMedium>matchMedium</a>(DOMString <var title="">mediaquery</var>);
487+
boolean <a href="#dom-stylemedia-matchmedium" title=dom-StyleMedia-matchMedium>matchMedium</a>(DOMString <var title="">medium</var>);
481488

482-
void <span title=dom-StyleMedia-addMediumListener>addMediumListener</span>(DOMString <var title="">mediaquery</var>, <a href="#mediaquerycallback">MediaQueryCallback</a> <var title="">mediaquerycallback</var>);
483-
void <span title=dom-StyleMedia-removeMediumListener>removeMediumListener</span>(DOMString <var title="">mediaquery</var>, <a href="#mediaquerycallback">MediaQueryCallback</a> <var title="">mediaquerycallback</var>);
489+
void <a href="#dom-StyleMedia-addMediumListener" title=dom-StyleMedia-addMediumListener>addMediumListener</a>(DOMString <var title="">medium</var>, <a href="#mediaquerycallback">MediaQueryCallback</a> <var title="">mediumcallback</var>);
490+
void <a href="#dom-StyleMedia-removeMediumListener" title=dom-StyleMedia-removeMediumListener>removeMediumListener</a>(DOMString <var title="">medium</var>, <a href="#mediaquerycallback">MediaQueryCallback</a> <var title="">mediumcallback</var>);
484491
};
485492

486493
[Callback=FunctionOnly, NoInterfaceObject]
487494
interface <dfn id=mediaquerycallback>MediaQueryCallback</dfn> {
488495
void <span>handleEvent</span>(<a href="#mediaquerychange">MediaQueryChange</a> <var title="">mediaquerychange</var>);
489-
};
490-
491-
[NoInterfaceObject]
492-
interface <dfn id=mediaquerychange>MediaQueryChange</dfn> {
493-
readonly attribute DOMString <span title=dom-MediaQueryChange-mediaText>mediaText</span>;
494-
readonly attribute boolean <span title=dom-MediaQueryChange-matches>matches</span>;
495-
};
496-
</pre>
496+
};</pre>
497497

498498
<p>The <dfn id=dom-stylemedia-type
499499
title=dom-StyleMedia-type><code>type</code></dfn> attribute <em
@@ -511,13 +511,14 @@ <h3 id=the-stylemedia-interface><span class=secno>4.1. </span>The <code
511511
</div>
512512

513513
<p>The <dfn id=dom-stylemedia-matchmedium
514-
title=dom-StyleMedia-matchMedium><code>matchMedium(<var>mediaquery</var>)</code></dfn>
515-
method, when invoked, <em class=ct>must</em> return the result of the
516-
following algorithm:
514+
title=dom-StyleMedia-matchMedium><code>matchMedium(<var
515+
title="">medium</var>)</code></dfn> method, when invoked, <em
516+
class=ct>must</em> return the result of the following algorithm:</p>
517+
<!-- should use "parse a media query" -->
517518

518519
<ol>
519520
<li>
520-
<p>If <var title="">mediaquery</var> can be parsed according to the rules
521+
<p>If <var title="">medium</var> can be parsed according to the rules
521522
given in the Media Queries specification and matches the state of the
522523
rendered <a href="#document"><code>Document</code></a> return
523524
<code>true</code> and terminate this algorithm. [<cite><a
@@ -533,7 +534,96 @@ <h3 id=the-stylemedia-interface><span class=secno>4.1. </span>The <code
533534
<pre><code>var isColorDevice = styleMedia.matchMedium("(color)")</code></pre>
534535
</div>
535536

536-
<p class=XXX>Define add/remove listener thingies here.
537+
<p>Each <a href="#window"><code>Window</code></a> has an associated <dfn
538+
id=list-of-media-query-listeners>list of media query listeners</dfn>. Each
539+
listener consists of a media query and a callback.
540+
541+
<p class=note>Due to the rules for <a
542+
href="#dom-StyleMedia-addMediumListener"><code
543+
title=dom-StyleMedia-addMediumListener>addMediumListener()</code></a>
544+
below each listener is unique. Media queries and callbacks are not
545+
necessarily unique.
546+
547+
<p>The <dfn id=dom-StyleMedia-addMediumListener
548+
title=dom-StyleMedia-addMediumListener>addMediumListener(<var
549+
title="">medium</var>, <var title="">mediumcallback</var>)</dfn> method
550+
<em class=ct>must</em> run these steps:</p>
551+
<!-- based on dom-MediaList-appendMedium -->
552+
553+
<ol>
554+
<li>
555+
<p>Let <var title="">m</var> be the result of <a
556+
href="#parse-a-media-query" title="parse a media query">parsing</a> the
557+
given value.
558+
559+
<li>
560+
<p>If <var title="">m</var> is null terminate these steps.
561+
562+
<li>
563+
<p>If <a href="#compare-media-queries" title="compare media
564+
queries">comparing</a> <var title="">m</var> with any of the media
565+
queries in the <a href="#list-of-media-query-listeners">list of media
566+
query listeners</a> returns true <em>and</em> the associated callback of
567+
that media query is the same as <var title="">mediumcallback</var>,
568+
terminate these steps.
569+
570+
<li>
571+
<p>Append the tuple of <var title="">m</var> and <var
572+
title="">mediumcallback</var> to the <a
573+
href="#list-of-media-query-listeners">list of media query listeners</a>.
574+
</ol>
575+
576+
<p>The <dfn id=dom-StyleMedia-removeMediumListener
577+
title=dom-StyleMedia-removeMediumListener>removeMediumListener(<var
578+
title="">medium</var>)</dfn> method <em class=ct>must</em> run these
579+
steps:
580+
581+
<ol>
582+
<li>
583+
<p>Let <var title="">m</var> be the result of <a
584+
href="#parse-a-media-query" title="parse a media query">parsing</a> the
585+
given value.
586+
587+
<li>
588+
<p>If <var title="">m</var> is null terminate these steps.
589+
590+
<li>
591+
<p>If <a href="#compare-media-queries" title="compare media
592+
queries">comparing</a> <var title="">m</var> with any of the media
593+
queries in the <a href="#list-of-media-query-listeners">list of media
594+
query listeners</a> returns true <em>and</em> the associated callback of
595+
that media query is the same as <var title="">mediumcallback</var>,
596+
remove the tuple of <var title="">m</var> and <var
597+
title="">mediumcallback</var> from the <a
598+
href="#list-of-media-query-listeners">list of media query listeners</a>.
599+
</ol>
600+
601+
<p>If one or more media queries in the <a
602+
href="#list-of-media-query-listeners">list of media query listeners</a>
603+
changes in evaluation then for each media query of which the evaluation
604+
changes, in the order of the <a href="#list-of-media-query-listeners">list
605+
of media query listeners</a>, <a href="#queue-a-task">queue a task</a>
606+
that invokes the associated callback, passing as argument a <a
607+
href="#mediaquerychange"><code>MediaQueryChange</code></a> object.
608+
609+
<pre class=idl>[NoInterfaceObject]
610+
interface <dfn id=mediaquerychange>MediaQueryChange</dfn> {
611+
readonly attribute DOMString <a href="#dom-mediaquerychange-mediatext" title=dom-MediaQueryChange-mediaText>mediaText</a>;
612+
readonly attribute boolean <a href="#dom-mediaquerychange-matches" title=dom-MediaQueryChange-matches>matches</a>;
613+
};</pre>
614+
615+
<p>The <dfn id=dom-mediaquerychange-mediatext
616+
title=dom-MediaQueryChange-mediaText><code>mediaText</code></dfn>
617+
attribute <em class=ct>must</em> return a <a
618+
href="#serialize-a-media-query" title="serialize a media
619+
query">serialization</a> of the media query.
620+
621+
<p>The <dfn id=dom-mediaquerychange-matches
622+
title=dom-MediaQueryChange-matches><code>matches</code></dfn> attribute
623+
<em class=ct>must</em> return whether the media query matches the state of
624+
the rendered <a href="#document"><code>Document</code></a> at the time the
625+
<a href="#task">task</a> was <a href="#queue-a-task" title="queue a
626+
task">queued</a>.
537627

538628
<h3 id=the-screen-interface><span class=secno>4.2. </span>The <code
539629
title="">Screen</code> Interface</h3>
@@ -1398,7 +1488,12 @@ <h2 class=no-num id=references>References</h2>
13981488

13991489
<dd><cite><a href="http://www.w3.org/TR/CSS2/">Cascading Style Sheets
14001490
Level 2 Revision 1</a></cite>, B. Bos, T. &Ccedil;elik, I. Hickson, H.
1401-
Wium Lie, editors. W3C, April 2009.
1491+
Wium Lie. W3C.
1492+
1493+
<dt>[<dfn id=ref-cssom>CSSOM</dfn>]
1494+
1495+
<dd><cite><a href="http://dev.w3.org/csswg/cssom/">CSSOM</a></cite> (work
1496+
in progress), A. van Kesteren. W3C.
14021497

14031498
<dt>[<dfn id=ref-dom2events>DOM2Events</dfn>]
14041499

‎cssom-view/Overview.src.html‎

Lines changed: 105 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -126,25 +126,34 @@ <h3 id="terminology">Terminology</h3>
126126

127127
<p><dfn><code>MouseEvent</code></dfn> is defined in DOM Level 2 Events.
128128
[<cite><span>DOM2Events</span></cite>]</p>
129-
130-
<p><dfn>HTML element</dfn>, <dfn><code>HTMLElement</code></dfn>, and
131-
<dfn><code>Window</code></dfn> are defined by HTML5.
132-
[<cite><span>HTML5</span></cite>]</p>
129+
130+
<p>
131+
<dfn>Compare media queries</dfn>,
132+
<dfn>parse a media query</dfn>, and
133+
<dfn>serialize a media query</dfn>
134+
are defined by the CSSOM. [<cite><span>CSSOM</span></cite>]</p>
135+
136+
<p>
137+
<dfn>HTML element</dfn>,
138+
<dfn><code>HTMLElement</code></dfn>,
139+
<dfn><code>queue a task</code></dfn>,
140+
<dfn><code>task</code></dfn>, and
141+
<dfn><code>Window</code></dfn>
142+
are defined by HTML5. [<cite><span>HTML5</span></cite>]</p>
133143

134144
<p><dfn>The HTML <code>body</code> element</dfn> is the first
135145
<code>body</code> <span>HTML element</span> child of the root
136146
<span>HTML element</span> <code>html</code>.</p>
137147

138-
<p>The terms
139-
<dfn id="content-edge">content edge</dfn>,
148+
<p><dfn id="content-edge">Content edge</dfn>,
140149
<dfn id="padding-edge">padding edge</dfn>,
141150
<dfn id="border-edge">border edge</dfn>, and
142151
<dfn id="canvas">canvas</dfn> are defined by CSS 2.1.
143152
[<cite><span>CSS21</span></cite>]</p>
144153

145-
<p>The terms <dfn id="viewport">viewport</dfn>,
154+
<p><dfn id="viewport">Viewport</dfn> and
146155
<dfn id="initial-containing-block">initial containing block</dfn> are
147-
defined by CSS 2.1 unless there's an ancestor <code>foreignObject</code>
156+
defined by CSS 2.1 unless there is an ancestor <code>foreignObject</code>
148157
element in the <code>http://www.w3.org/2000/svg</code> namespace in which
149158
case that element acts as viewport and initial containing block.
150159
[<cite><span>CSS21</span></cite>]
@@ -338,23 +347,16 @@ <h3 id="the-stylemedia-interface">The <code title="">StyleMedia</code> Interface
338347

339348
<pre class="idl">interface <dfn id="stylemedia">StyleMedia</dfn> {
340349
readonly attribute DOMString <span title="dom-StyleMedia-type">type</span>;
341-
boolean <span title="dom-StyleMedia-matchMedium">matchMedium</span>(DOMString <var title="">mediaquery</var>);
350+
boolean <span title="dom-StyleMedia-matchMedium">matchMedium</span>(DOMString <var title="">medium</var>);
342351

343-
void <span title="dom-StyleMedia-addMediumListener">addMediumListener</span>(DOMString <var title="">mediaquery</var>, <span>MediaQueryCallback</span> <var title="">mediaquerycallback</var>);
344-
void <span title="dom-StyleMedia-removeMediumListener">removeMediumListener</span>(DOMString <var title="">mediaquery</var>, <span>MediaQueryCallback</span> <var title="">mediaquerycallback</var>);
352+
void <span title="dom-StyleMedia-addMediumListener">addMediumListener</span>(DOMString <var title="">medium</var>, <span>MediaQueryCallback</span> <var title="">mediumcallback</var>);
353+
void <span title="dom-StyleMedia-removeMediumListener">removeMediumListener</span>(DOMString <var title="">medium</var>, <span>MediaQueryCallback</span> <var title="">mediumcallback</var>);
345354
};
346355

347356
[Callback=FunctionOnly, NoInterfaceObject]
348357
interface <dfn id="mediaquerycallback">MediaQueryCallback</dfn> {
349358
void <span>handleEvent</span>(<span>MediaQueryChange</span> <var title="">mediaquerychange</var>);
350-
};
351-
352-
[NoInterfaceObject]
353-
interface <dfn id="mediaquerychange">MediaQueryChange</dfn> {
354-
readonly attribute DOMString <span title="dom-MediaQueryChange-mediaText">mediaText</span>;
355-
readonly attribute boolean <span title="dom-MediaQueryChange-matches">matches</span>;
356-
};
357-
</pre>
359+
};</pre>
358360

359361
<p>The
360362
<dfn id="dom-stylemedia-type" title="dom-StyleMedia-type"><code>type</code></dfn>
@@ -371,12 +373,13 @@ <h3 id="the-stylemedia-interface">The <code title="">StyleMedia</code> Interface
371373
</div>
372374

373375
<p>The
374-
<dfn id="dom-stylemedia-matchmedium" title="dom-StyleMedia-matchMedium"><code>matchMedium(<var>mediaquery</var>)</code></dfn>
376+
<dfn id="dom-stylemedia-matchmedium" title="dom-StyleMedia-matchMedium"><code>matchMedium(<var title="">medium</var>)</code></dfn>
375377
method, when invoked, <em class="ct">must</em> return the result of the
376378
following algorithm:</p>
379+
<!-- should use "parse a media query" -->
377380

378381
<ol>
379-
<li><p>If <var title="">mediaquery</var> can be parsed according to the
382+
<li><p>If <var title="">medium</var> can be parsed according to the
380383
rules given in the Media Queries specification and matches the state of
381384
the rendered <code>Document</code> return <code>true</code> and terminate
382385
this algorithm. [<cite><span>MQ</span></cite>]</p></li>
@@ -390,8 +393,83 @@ <h3 id="the-stylemedia-interface">The <code title="">StyleMedia</code> Interface
390393

391394
<pre><code>var isColorDevice = styleMedia.matchMedium("(color)")</code></pre>
392395
</div>
396+
397+
<p>Each <code>Window</code> has an associated
398+
<dfn>list of media query listeners</dfn>. Each listener consists of a
399+
media query and a callback.</p>
393400

394-
<p class="XXX">Define add/remove listener thingies here.</p>
401+
<p class="note">Due to the rules for
402+
<code title="dom-StyleMedia-addMediumListener">addMediumListener()</code>
403+
below each listener is unique. Media queries and callbacks are not
404+
necessarily unique.</p>
405+
406+
<p>The
407+
<dfn id="dom-StyleMedia-addMediumListener" title="dom-StyleMedia-addMediumListener">addMediumListener(<var title="">medium</var>, <var title="">mediumcallback</var>)</code></dfn>
408+
method <em class="ct">must</em> run these steps:</p>
409+
<!-- based on dom-MediaList-appendMedium -->
410+
411+
<ol>
412+
<li><p>Let <var title="">m</var> be the result of
413+
<span title="parse a media query">parsing</span> the given
414+
value.</p></li>
415+
416+
<li><p>If <var title="">m</var> is null terminate these steps.</p></li>
417+
418+
<li><p>If <span title="compare media queries">comparing</span>
419+
<var title="">m</var> with any of the media queries in the
420+
<span>list of media query listeners</span> returns true <em>and</em> the
421+
associated callback of that media query is the same as
422+
<var title="">mediumcallback</var>, terminate these steps.</p></li>
423+
424+
<li><p>Append the tuple of <var title="">m</var> and
425+
<var title="">mediumcallback</var> to the
426+
<span>list of media query listeners</span>.</p></li>
427+
</ol>
428+
429+
<p>The
430+
<dfn id="dom-StyleMedia-removeMediumListener" title="dom-StyleMedia-removeMediumListener">removeMediumListener(<var title="">medium</var>)</code></dfn>
431+
method <em class="ct">must</em> run these steps:</p>
432+
433+
<ol>
434+
<li><p>Let <var title="">m</var> be the result of
435+
<span title="parse a media query">parsing</span> the given
436+
value.</p></li>
437+
438+
<li><p>If <var title="">m</var> is null terminate these steps.</p></li>
439+
440+
<li><p>If <span title="compare media queries">comparing</span>
441+
<var title="">m</var> with any of the media queries in the
442+
<span>list of media query listeners</span> returns true <em>and</em> the
443+
associated callback of that media query is the same as
444+
<var title="">mediumcallback</var>, remove the tuple of
445+
<var title="">m</var> and <var title="">mediumcallback</var> from the
446+
<span>list of media query listeners</span>.</p></li>
447+
</ol>
448+
449+
<p>If one or more media queries in the
450+
<span>list of media query listeners</span> changes in evaluation then for
451+
each media query of which the evaluation changes, in the order of the
452+
<span>list of media query listeners</span>, <span>queue a task</span> that
453+
invokes the associated callback, passing as argument a
454+
<code>MediaQueryChange</code> object.</p>
455+
456+
<pre class="idl">[NoInterfaceObject]
457+
interface <dfn id="mediaquerychange">MediaQueryChange</dfn> {
458+
readonly attribute DOMString <span title="dom-MediaQueryChange-mediaText">mediaText</span>;
459+
readonly attribute boolean <span title="dom-MediaQueryChange-matches">matches</span>;
460+
};</pre>
461+
462+
<p>The
463+
<dfn id="dom-mediaquerychange-mediatext" title="dom-MediaQueryChange-mediaText"><code>mediaText</code></dfn>
464+
attribute <em class="ct">must</em> return a
465+
<span title="serialize a media query">serialization</span> of the
466+
media query.</p>
467+
468+
<p>The
469+
<dfn id="dom-mediaquerychange-matches" title="dom-MediaQueryChange-matches"><code>matches</code></dfn>
470+
attribute <em class="ct">must</em> return whether the media query matches
471+
the state of the rendered <code>Document</code> at the time the
472+
<span>task</span> was <span title="queue a task">queued</span>.</p>
395473

396474

397475
<h3 id="the-screen-interface">The <code title="">Screen</code> Interface</h3>
@@ -1203,7 +1281,11 @@ <h2 class="no-num">References</h2>
12031281
<dt>[<dfn id="ref-css21">CSS21</dfn>]</dt>
12041282
<dd><cite><a href="http://www.w3.org/TR/CSS2/">Cascading Style Sheets
12051283
Level 2 Revision 1</a></cite>, B. Bos, T. &Ccedil;elik, I. Hickson, H.
1206-
Wium Lie, editors. W3C, April 2009.</dd>
1284+
Wium Lie. W3C.</dd>
1285+
1286+
<dt>[<dfn id="ref-cssom">CSSOM</dfn>]</dt>
1287+
<dd><cite><a href="http://dev.w3.org/csswg/cssom/">CSSOM</a></cite>
1288+
(work in progress), A. van Kesteren. W3C.</dd>
12071289

12081290
<dt>[<dfn id="ref-dom2events">DOM2Events</dfn>]</dt>
12091291
<dd><cite><a href="http://www.w3.org/TR/DOM-Level-2-Events/">Document

0 commit comments

Comments
 (0)