add a background section explaining the story of the various features

Author: annevk

cssom-view/Overview.html

@@ -100,73 +100,75 @@ <h2 class="no-num no-toc" id=toc>Table of Contents</h2>
   <!--begin-toc-->
 
   <ul class=toc>
-   <li><a href="#conformance"><span class=secno>1. </span>Conformance
+   <li><a href="#background"><span class=secno>1. </span>Background</a>
+
+   <li><a href="#conformance"><span class=secno>2. </span>Conformance
     Criteria</a>
     <ul class=toc>
-     <li><a href="#dependencies"><span class=secno>1.1
+     <li><a href="#dependencies"><span class=secno>2.1
       </span>Dependencies</a>
 
-     <li><a href="#terminology"><span class=secno>1.2 </span>Terminology</a>
+     <li><a href="#terminology"><span class=secno>2.2 </span>Terminology</a>
     </ul>
 
-   <li><a href="#dom-features"><span class=secno>2. </span>DOM Features</a>
+   <li><a href="#dom-features"><span class=secno>3. </span>DOM Features</a>
 
-   <li><a href="#the-abstractview-interface"><span class=secno>3. </span>The
+   <li><a href="#the-abstractview-interface"><span class=secno>4. </span>The
     <code title="">AbstractView</code> Interface</a>
     <ul class=toc>
-     <li><a href="#the-media-interface"><span class=secno>3.1 </span>The
+     <li><a href="#the-media-interface"><span class=secno>4.1 </span>The
       <code title="">Media</code> Interface</a>
     </ul>
 
-   <li><a href="#the-screenview-interface"><span class=secno>4. </span>The
+   <li><a href="#the-screenview-interface"><span class=secno>5. </span>The
     <code title="">ScreenView</code> Interface</a>
     <ul class=toc>
-     <li><a href="#the-screen-interface"><span class=secno>4.1 </span>The
+     <li><a href="#the-screen-interface"><span class=secno>5.1 </span>The
       <code title="">Screen</code> Interface</a>
     </ul>
 
-   <li><a href="#the-documentview-interface"><span class=secno>5. </span>The
+   <li><a href="#the-documentview-interface"><span class=secno>6. </span>The
     <code title="">DocumentView</code> Interface</a>
 
-   <li><a href="#the-elementview-interface"><span class=secno>6. </span>The
+   <li><a href="#the-elementview-interface"><span class=secno>7. </span>The
     <code title="">ElementView</code> Interface</a>
     <ul class=toc>
-     <li><a href="#the-getclientrects"><span class=secno>6.1 </span>The <code
+     <li><a href="#the-getclientrects"><span class=secno>7.1 </span>The <code
       title="">getClientRects()</code> and <code
       title="">getBoundingClientRect()</code> methods</a>
 
-     <li><a href="#scroll-attributes"><span class=secno>6.2 </span>The <code
+     <li><a href="#scroll-attributes"><span class=secno>7.2 </span>The <code
       title="">scrollTop</code>, <code title="">scrollLeft</code>, <code
       title="">scrollWidth</code>, and <code title="">scrollHeight</code>
       attributes</a>
 
-     <li><a href="#client-attributes"><span class=secno>6.3 </span>The <code
+     <li><a href="#client-attributes"><span class=secno>7.3 </span>The <code
       title="">clientTop</code>, <code title="">clientLeft</code>, <code
       title="">clientWidth</code>, and <code title="">clientHeight</code>
       attributes</a>
     </ul>
 
-   <li><a href="#the-htmlelementview-interface"><span class=secno>7.
+   <li><a href="#the-htmlelementview-interface"><span class=secno>8.
     </span>The <code title="">HTMLElementView</code> Interface</a>
     <ul class=toc>
-     <li><a href="#offset-attributes"><span class=secno>7.1 </span>The <code
+     <li><a href="#offset-attributes"><span class=secno>8.1 </span>The <code
       title="">offsetParent</code>, <code title="">offsetTop</code>, <code
       title="">offsetLeft</code>, <code title="">offsetWidth</code>, and
       <code title="">offsetHeight</code> attributes</a>
     </ul>
 
-   <li><a href="#the-rangeview-interface"><span class=secno>8. </span>The
+   <li><a href="#the-rangeview-interface"><span class=secno>9. </span>The
     <code title="">RangeView</code> Interface</a>
 
-   <li><a href="#the-mouseeventview-interface"><span class=secno>9.
+   <li><a href="#the-mouseeventview-interface"><span class=secno>10.
     </span>The <code title="">MouseEventView</code> Interface</a>
 
-   <li><a href="#rectangles"><span class=secno>10. </span>Rectangles</a>
+   <li><a href="#rectangles"><span class=secno>11. </span>Rectangles</a>
     <ul class=toc>
-     <li><a href="#the-clientrectlist-interface"><span class=secno>10.1
+     <li><a href="#the-clientrectlist-interface"><span class=secno>11.1
       </span>The <code title="">ClientRectList</code> Interface</a>
 
-     <li><a href="#the-clientrect-interface"><span class=secno>10.2
+     <li><a href="#the-clientrect-interface"><span class=secno>11.2
       </span>The <code title="">ClientRect</code> Interface</a>
     </ul>
 
@@ -176,7 +178,24 @@ <h2 class="no-num no-toc" id=toc>Table of Contents</h2>
   </ul>
   <!--end-toc-->
 
-  <h2 id=conformance><span class=secno>1. </span>Conformance Criteria</h2>
+  <h2 id=background><span class=secno>1. </span>Background</h2>
+
+  <p>Many of the features defined in this specification have been supported
+   by browsers for a long period of time. The goal of this specification is
+   to define these features in such a way that they can be implemented by all
+   browsers in an identical way without differences between no quirks,
+   limited quirks and no quirks mode, as defined by HTML&nbsp;5. [<cite><a
+   href="#ref-html5">HTML5</a></cite>]
+
+  <p>As well as serving as a specification for that "de facto" standard this
+   specification also obsoletes DOM Level 2 Views by taking the concepts
+   defined in that specification, making them more concrete, and integrating
+   them with the various "de facto" concepts.
+
+  <p>Finally, the specification defines a couple of new features that the CSS
+   WG considers to be useful for authors.
+
+  <h2 id=conformance><span class=secno>2. </span>Conformance Criteria</h2>
 
   <p>Everything in this specification is normative except for diagrams,
    examples, notes and sections marked non-normative.</p>
@@ -191,7 +210,7 @@ <h2 id=conformance><span class=secno>1. </span>Conformance Criteria</h2>
   <p>A conforming user agent implements all the requirements made by this
    specification.
 
-  <h3 id=dependencies><span class=secno>1.1 </span>Dependencies</h3>
+  <h3 id=dependencies><span class=secno>2.1 </span>Dependencies</h3>
 
   <p>This specification depends on several definitions and features defined
    in the HTML&nbsp;5 specification. [<cite><a
@@ -202,7 +221,7 @@ <h3 id=dependencies><span class=secno>1.1 </span>Dependencies</h3>
    href="#ref-dom2events">DOM2Events</a></cite>] [<cite><a
    href="#ref-dom3core">DOM3Core</a></cite>]
 
-  <h3 id=terminology><span class=secno>1.2 </span>Terminology</h3>
+  <h3 id=terminology><span class=secno>2.2 </span>Terminology</h3>
 
   <p>The terms <dfn id=html-element>HTML element</dfn>, <dfn
    id=view>view</dfn> and <dfn id=default>default view</dfn> are defined by
@@ -234,7 +253,7 @@ <h3 id=terminology><span class=secno>1.2 </span>Terminology</h3>
    the <a href="#canvas">canvas</a> that is rendered upon, excluding content
    on negative axis.
 
-  <h2 id=dom-features><span class=secno>2. </span>DOM Features</h2>
+  <h2 id=dom-features><span class=secno>3. </span>DOM Features</h2>
 
   <p>This specification defines the <a
    href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures">DOM
@@ -248,7 +267,7 @@ <h2 id=dom-features><span class=secno>2. </span>DOM Features</h2>
    and user agents supporting parts of the specification might not claim
    support for the DOM feature.
 
-  <h2 id=the-abstractview-interface><span class=secno>3. </span>The <code
+  <h2 id=the-abstractview-interface><span class=secno>4. </span>The <code
    title="">AbstractView</code> Interface</h2>
 
   <p>The <code><a href="#abstractview">AbstractView</a></code> interface is a
@@ -272,7 +291,7 @@ <h2 id=the-abstractview-interface><span class=secno>3. </span>The <code
    href="#media">Media</a></code> interface. It <em class=ct>must</em> always
    return the same object.
 
-  <h3 id=the-media-interface><span class=secno>3.1 </span>The <code
+  <h3 id=the-media-interface><span class=secno>4.1 </span>The <code
    title="">Media</code> Interface</h3>
 
   <pre class=idl>interface <dfn id=media>Media</dfn> {
@@ -316,7 +335,7 @@ <h3 id=the-media-interface><span class=secno>3.1 </span>The <code
    <pre><code>var isColorDevice = media.matchMedium("(color)")</code></pre>
   </div>
 
-  <h2 id=the-screenview-interface><span class=secno>4. </span>The <code
+  <h2 id=the-screenview-interface><span class=secno>5. </span>The <code
    title="">ScreenView</code> Interface</h2>
 
   <p>An object implementing the <code><a
@@ -477,7 +496,7 @@ <h2 id=the-screenview-interface><span class=secno>4. </span>The <code
    href="#screen">Screen</a></code> interface. It <em class=ct>must</em>
    always return the same object.
 
-  <h3 id=the-screen-interface><span class=secno>4.1 </span>The <code
+  <h3 id=the-screen-interface><span class=secno>5.1 </span>The <code
    title="">Screen</code> Interface</h3>
 
   <p>As its name suggests, the <code><a href="#screen">Screen</a></code>
@@ -520,7 +539,7 @@ <h3 id=the-screen-interface><span class=secno>4.1 </span>The <code
   <p class=note>Bits allocated to handling transparancy are not taken into
    account.
 
-  <h2 id=the-documentview-interface><span class=secno>5. </span>The <code
+  <h2 id=the-documentview-interface><span class=secno>6. </span>The <code
    title="">DocumentView</code> Interface</h2>
 
   <p>Objects implementing the <code>Document</code> interface, as defined in
@@ -557,7 +576,7 @@ <h2 id=the-documentview-interface><span class=secno>5. </span>The <code
    specification. Hit testing might be defined in a future revision of CSS or
    HTML&nbsp;5.
 
-  <h2 id=the-elementview-interface><span class=secno>6. </span>The <code
+  <h2 id=the-elementview-interface><span class=secno>7. </span>The <code
    title="">ElementView</code> Interface</h2>
 
   <p>Objects implementing the <code>Element</code> interface, as defined by
@@ -581,7 +600,7 @@ <h2 id=the-elementview-interface><span class=secno>6. </span>The <code
 
 };</pre>
 
-  <h3 id=the-getclientrects><span class=secno>6.1 </span>The <code
+  <h3 id=the-getclientrects><span class=secno>7.1 </span>The <code
    title="">getClientRects()</code> and <code
    title="">getBoundingClientRect()</code> methods</h3>
 
@@ -675,7 +694,7 @@ <h3 id=the-getclientrects><span class=secno>6.1 </span>The <code
 var exampleHeight = example.height;</code></pre>
   </div>
 
-  <h3 id=scroll-attributes><span class=secno>6.2 </span>The <code
+  <h3 id=scroll-attributes><span class=secno>7.2 </span>The <code
    title="">scrollTop</code>, <code title="">scrollLeft</code>, <code
    title="">scrollWidth</code>, and <code title="">scrollHeight</code>
    attributes</h3>
@@ -819,7 +838,7 @@ <h3 id=scroll-attributes><span class=secno>6.2 </span>The <code
   </ol>
   <!-- for inline boxes offsetWidth and offsetHeight are identical to offset* -->
 
-  <h3 id=client-attributes><span class=secno>6.3 </span>The <code
+  <h3 id=client-attributes><span class=secno>7.3 </span>The <code
    title="">clientTop</code>, <code title="">clientLeft</code>, <code
    title="">clientWidth</code>, and <code title="">clientHeight</code>
    attributes</h3>
@@ -863,7 +882,7 @@ <h3 id=client-attributes><span class=secno>6.3 </span>The <code
    href="#padding-edge">padding edge</a> and the <a
    href="#border-edge">border edge</a>) otherwise.
 
-  <h2 id=the-htmlelementview-interface><span class=secno>7. </span>The <code
+  <h2 id=the-htmlelementview-interface><span class=secno>8. </span>The <code
    title="">HTMLElementView</code> Interface</h2>
 
   <p>Objects implementing the <code>HTMLElement</code> interface, as defined
@@ -883,7 +902,7 @@ <h2 id=the-htmlelementview-interface><span class=secno>7. </span>The <code
    href="#htmlelementview">HTMLElementView</a></code> interface are expressed
    in <a href="#css-pixel" title="CSS pixel">CSS pixels</a>.
 
-  <h3 id=offset-attributes><span class=secno>7.1 </span>The <code
+  <h3 id=offset-attributes><span class=secno>8.1 </span>The <code
    title="">offsetParent</code>, <code title="">offsetTop</code>, <code
    title="">offsetLeft</code>, <code title="">offsetWidth</code>, and <code
    title="">offsetHeight</code> attributes</h3>
@@ -1028,7 +1047,7 @@ <h3 id=offset-attributes><span class=secno>7.1 </span>The <code
      <var>A</var>.
   </ol>
 
-  <h2 id=the-rangeview-interface><span class=secno>8. </span>The <code
+  <h2 id=the-rangeview-interface><span class=secno>9. </span>The <code
    title="">RangeView</code> Interface</h2>
 
   <p>Objects implementing the <code>Range</code> interface, as defined by DOM
@@ -1097,7 +1116,7 @@ <h2 id=the-rangeview-interface><span class=secno>8. </span>The <code
      which the height or width is not zero.
   </ol>
 
-  <h2 id=the-mouseeventview-interface><span class=secno>9. </span>The <code
+  <h2 id=the-mouseeventview-interface><span class=secno>10. </span>The <code
    title="">MouseEventView</code> Interface</h2>
 
   <p>Objects implementing the <code>MouseEvent</code> interface, as defined
@@ -1182,9 +1201,9 @@ <h2 id=the-mouseeventview-interface><span class=secno>9. </span>The <code
    href="#mouseeventview-y">y</a></code> attributes are included for
    historical reasons.
 
-  <h2 id=rectangles><span class=secno>10. </span>Rectangles</h2>
+  <h2 id=rectangles><span class=secno>11. </span>Rectangles</h2>
 
-  <h3 id=the-clientrectlist-interface><span class=secno>10.1 </span>The <code
+  <h3 id=the-clientrectlist-interface><span class=secno>11.1 </span>The <code
    title="">ClientRectList</code> Interface</h3>
 
   <p>The <code><a href="#clientrectlist">ClientRectList</a></code> object
@@ -1219,7 +1238,7 @@ <h3 id=the-clientrectlist-interface><span class=secno>10.1 </span>The <code
    href="#clientrectlist-item">item()</a></code> method would when invoked
    with that argument.
 
-  <h3 id=the-clientrect-interface><span class=secno>10.2 </span>The <code
+  <h3 id=the-clientrect-interface><span class=secno>11.2 </span>The <code
    title="">ClientRect</code> Interface</h3>
 
   <p>Objects implementing the <code><a

cssom-view/Overview.src.html

@@ -77,6 +77,23 @@ <h2 id="toc" class="no-num no-toc">Table of Contents</h2>
   <!-- toc -->
 
 
+  <h2 id="background">Background</h2>
+  
+  <p>Many of the features defined in this specification have been supported
+  by browsers for a long period of time. The goal of this specification is
+  to define these features in such a way that they can be implemented by all
+  browsers in an identical way without differences between no quirks,
+  limited quirks and no quirks mode, as defined by HTML&nbsp;5.
+  [<cite><span>HTML5</span></cite>]</p>
+  
+  <p>As well as serving as a specification for that "de facto" standard this
+  specification also obsoletes DOM Level 2 Views by taking the concepts
+  defined in that specification, making them more concrete, and integrating
+  them with the various "de facto" concepts.</p>
+  
+  <p>Finally, the specification defines a couple of new features that the
+  CSS WG considers to be useful for authors.</p>
+
 
   <h2 id="conformance">Conformance Criteria</h2>