More partial work on cssom-view.

Author: tabatkins

cssom-view/Overview.bs

@@ -700,70 +700,68 @@ When asked to <dfn>evaluate media queries and report changes</dfn> for a {{Docum
 </ol>
 
 <div class='example'>
-A simple piece of code that detects changes in the orientation of the viewport can be written as follows:
-<pre>function handleOrientationChange(event) {
-    if(event.matches) // landscape
-      &hellip;
-    else
-      &hellip;
-  }
-  var mql = matchMedia("(orientation:landscape)")
-  mql.onchange = handleOrientationChange</pre>
+	A simple piece of code that detects changes in the orientation of the viewport can be written as follows:
+
+	<pre>
+	function handleOrientationChange(event) {
+		if(event.matches) // landscape
+			&hellip;
+		else
+			&hellip;
+	}
+	var mql = matchMedia("(orientation:landscape)");
+	mql.onchange = handleOrientationChange;</pre>
 </div>
 
-<pre class=idl>interface <dfn>MediaQueryList</dfn> : <span data-anolis-spec=dom>EventTarget</span> {
-  readonly attribute DOMString <span title=dom-MediaQueryList-media>media</span>;
-  readonly attribute boolean <span title=dom-MediaQueryList-matches>matches</span>;
-  void <span title=dom-MediaQueryList-addListener>addListener</span>(<span data-anolis-spec=dom>EventListener</span>? listener);
-  void <span title=dom-MediaQueryList-removeListener>removeListener</span>(<span data-anolis-spec=dom>EventListener</span>? listener);
-           attribute <span data-anolis-spec=html>EventHandler</span> onchange;
-};</pre>
+<pre class=idl>
+interface MediaQueryList : EventTarget {
+  readonly attribute DOMString media;
+  readonly attribute boolean matches;
+  void addListener(EventListener? listener);
+  void removeListener(EventListener? listener);
+           attribute EventHandler onchange;
+};
+</pre>
 
-The <dfn title=dom-MediaQueryList-media><code>media</dfn> attribute must return
+The <dfn attribute for=MediaQueryList>media</dfn> attribute must return
 the associated <span title=concept-MediaQueryList-media>media</span>.
 
-The <dfn title=dom-MediaQueryList-matches><code>matches</dfn> attribute must return
+The <dfn attribute for=MediaQueryList>matches</dfn> attribute must return
 the associated <a concept>matches state</a>. <!--fingerprint-->
 
-The <dfn title=dom-MediaQueryList-addListener><code>addListener(<var>listener</var>)</dfn> method must run these steps:
+The <dfn method for=MediaQueryList>addListener(<var>listener</var>)</dfn> method must run these steps:
 
-<ol>
- <li>If <var title="">listener</var> is null, terminate these steps.
- <li>Append an <span data-anolis-spec=dom title="concept-event-listener">event listener</span>
- to the associated list of
- <span data-anolis-spec=dom title="concept-event-listener">event listeners</span> with <b>type</b>
- set to <code>change</code>, <b>callback</b> set to <var title="">listener</var>, and
- <b>capture</b> set to false, unless there
- already is an <span data-anolis-spec=dom title="concept-event-listener">event listener</span> in
- that list with the same <b>type</b>, <b>callback</b>, and <b>capture</b>.
-</ol>
+1. If <var>listener</var> is null, terminate these steps.
+2. Append an <a>event listener</a> to the associated list of <a>event listeners</a>
+	with <b>type</b> set to <code>change</code>,
+	<b>callback</b> set to <var>listener</var>,
+	and <b>capture</b> set to false,
+	unless there already is an <a>event listener</a> in that list
+	with the same <b>type</b>, <b>callback</b>, and <b>capture</b>.
 
-The <dfn title=dom-MediaQueryList-removeListener><code>removeListener(<var>listener</var>)</dfn> method must run these steps:
+The <dfn method for=MediaQueryList>removeListener(<var>listener</var>)</dfn> method must run these steps:
 
-<ol>
- <li>Remove an <span data-anolis-spec=dom title="concept-event-listener">event listener</span>
- from the associated list of
- <span data-anolis-spec=dom title="concept-event-listener">event listeners</span>, whose
- <b>type</b> is <code>change</code>, <b>callback</b> is <var title="">listener</var>, and
- <b>capture</b> is false.
-</ol>
+1. Remove an <a>event listener</a> from the associated list of <a>event listeners</a>,
+	whose <b>type</b> is <code>change</code>,
+	<b>callback</b> is <var>listener</var>,
+	and <b>capture</b> is false.
 
-<p class=note>This specification initially had a custom callback mechanism with <code title=dom-MediaQueryList-addListener>addListener</code> and
-<code title=dom-MediaQueryList-removeListener>removeListener</code>, and the callback was invoked with the associated media query list as argument.
+Note: This specification initially had a custom callback mechanism with {{addListener()}} and
+{{removeListener()}}, and the callback was invoked with the associated media query list as argument.
 Now the normal event mechanism is used instead.
-For backwards compatibility, the <code title=dom-MediaQueryList-addListener>addListener</code> and <code title=dom-MediaQueryList-removeListener>removeListener</code> methods
-are basically aliases for <code data-anolis-spec=dom title=dom-EventTarget-addEventListener>addEventListener</code> and <code data-anolis-spec=dom title=dom-EventTarget-removeEventListener>removeEventListener</code>, respectively,
+For backwards compatibility, the {{addListener()}} and {{removeListener()}} methods
+are basically aliases for {{addEventListener()}} and {{removeEventListener()}}, respectively,
 and the <code>change</code> event masquerades as a {{MediaQueryList}}.
 
-The following are the <span data-anolis-spec=html>event handlers</span>
-(and their corresponding <span data-anolis-spec=html title="event handler event type">event handler event types</span>) that must be supported,
-as <span data-anolis-spec=html>event handler IDL attributes</span>, by all objects implementing the {{MediaQueryList}} interface:
+The following are the <a>event handlers</a>
+(and their corresponding <a>event handler event types</a>) that must be supported,
+as <a>event handler IDL attributes</a>, by all objects implementing the {{MediaQueryList}} interface:
 
 <table class="complex data">
  <thead>
   <tr>
-   <th><span data-anolis-spec=html title="event handlers">Event handler</span>
-   <th><span data-anolis-spec=html>Event handler event type</span>
+   <th><a>Event handler</a>
+   <th><a>Event handler event type</a>
 
 
  <tbody>
@@ -774,33 +772,37 @@ as <span data-anolis-spec=html>event handler IDL attributes</span>, by all objec
 
 </table>
 
-<pre class=idl>[<span data-anolis-spec=dom title=concept-event-constructor>Constructor</span>(DOMString type, optional <span>MediaQueryListEventInit</span> eventInitDict)]
-interface <dfn>MediaQueryListEvent</dfn> : <span data-anolis-spec=dom>Event</span> {
-  readonly attribute DOMString <span title=dom-MediaQueryListEvent-media>media</span>;
-  readonly attribute boolean <span title=dom-MediaQueryListEvent-matches>matches</span>;
+<pre class=idl>
+[Constructor(DOMString type, optional MediaQueryListEventInit eventInitDict)]
+interface MediaQueryListEvent : Event {
+  readonly attribute DOMString media;
+  readonly attribute boolean matches;
 };
 
-dictionary <dfn>MediaQueryListEventInit</dfn> : <span data-anolis-spec=dom>EventInit</span> {
+dictionary MediaQueryListEventInit : EventInit {
   DOMString media = "";
   boolean matches = false;
-};</pre>
+};
+</pre>
 
-The <dfn title=dom-MediaQueryListEvent-media><code>media</dfn> attribute must return the value it was initialized to.
+The <dfn attribute for=MediaQueryListEvent>media</dfn> attribute must return the value it was initialized to.
 
-The <dfn title=dom-MediaQueryListEvent-matches><code>matches</dfn> attribute must return the value it was initialized to.
+The <dfn attribute for=MediaQueryListEvent>matches</dfn> attribute must return the value it was initialized to.
 
 <h3>The <code>Screen</code> Interface</h3>
 
 As its name suggests, the <code>Screen</code> interface represents information about the screen of the output device.
 
-<pre class=idl>interface <dfn>Screen</dfn> {
-  readonly attribute double <span title=dom-Screen-availWidth>availWidth</span>;
-  readonly attribute double <span title=dom-Screen-availHeight>availHeight</span>;
-  readonly attribute double <span title=dom-Screen-width>width</span>;
-  readonly attribute double <span title=dom-Screen-height>height</span>;
-  readonly attribute unsigned long <span title=dom-Screen-colorDepth>colorDepth</span>;
-  readonly attribute unsigned long <span title=dom-Screen-pixelDepth>pixelDepth</span>;
-};</pre>
+<pre class=idl>
+interface Screen {
+  readonly attribute double availWidth;
+  readonly attribute double availHeight;
+  readonly attribute double width;
+  readonly attribute double height;
+  readonly attribute unsigned long colorDepth;
+  readonly attribute unsigned long pixelDepth;
+};
+</pre>
 
 The <dfn title=dom-Screen-availWidth><code>availWidth</dfn> attribute must return the available width of the rendering surface of the output device,
 in CSS pixels. <!--fingerprint-->