[css-shapes] add values/interactions sections

Author: astearns

css-shapes/Overview.html

@@ -184,49 +184,55 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
+    <ul class=toc>
+     <li><a href="#module-interactions"><span class=secno>1.1. </span>Module
+      Interactions</a>
+
+     <li><a href="#values"><span class=secno>1.2. </span>Values</a>
 
-   <li><a href="#definitions"><span class=secno>2. </span>Definitions</a>
+     <li><a href="#definitions"><span class=secno>1.3. </span>Definitions</a>
+    </ul>
 
-   <li><a href="#shapes"><span class=secno>3. </span>Shapes</a>
+   <li><a href="#shapes"><span class=secno>2. </span>Shapes</a>
     <ul class=toc>
      <li><a href="#relation-to-box-model-and-float-behavior"><span
-      class=secno>3.1. </span>Relation to the box model and float
+      class=secno>2.1. </span>Relation to the box model and float
       behavior</a>
 
-     <li><a href="#basic-shapes-from-svg-syntax"><span class=secno>3.2.
+     <li><a href="#basic-shapes-from-svg-syntax"><span class=secno>2.2.
       </span>Basic Shapes</a>
       <ul class=toc>
-       <li><a href="#supported-basic-shapes"><span class=secno>3.2.1.
+       <li><a href="#supported-basic-shapes"><span class=secno>2.2.1.
         </span>Supported Shapes</a>
 
-       <li><a href="#basic-shape-syntax"><span class=secno>3.2.2.
+       <li><a href="#basic-shape-syntax"><span class=secno>2.2.2.
         </span>Syntax of Basic Shapes</a>
 
-       <li><a href="#basic-shape-interpolation"><span class=secno>3.2.3.
+       <li><a href="#basic-shape-interpolation"><span class=secno>2.2.3.
         </span>Interpolation of Basic Shapes</a>
       </ul>
 
-     <li><a href="#shapes-from-image"><span class=secno>3.3. </span>Shapes
+     <li><a href="#shapes-from-image"><span class=secno>2.3. </span>Shapes
       from Image</a>
 
-     <li><a href="#declaring-shapes"><span class=secno>3.4. </span>Declaring
+     <li><a href="#declaring-shapes"><span class=secno>2.4. </span>Declaring
       Shapes</a>
       <ul class=toc>
-       <li><a href="#shape-outside-property"><span class=secno>3.4.1.
+       <li><a href="#shape-outside-property"><span class=secno>2.4.1.
         </span>The ‘<code class=property>shape-outside</code>’
         Property</a>
 
-       <li><a href="#shape-image-threshold-property"><span class=secno>3.4.2.
+       <li><a href="#shape-image-threshold-property"><span class=secno>2.4.2.
         </span>The ‘<code class=property>shape-image-threshold</code>’
         Property</a>
 
-       <li><a href="#shape-margin-property"><span class=secno>3.4.3.
+       <li><a href="#shape-margin-property"><span class=secno>2.4.3.
         </span>The ‘<code class=property>shape-margin</code>’
         property</a>
       </ul>
     </ul>
 
-   <li><a href="#conformance"><span class=secno>4. </span>Conformance</a>
+   <li><a href="#conformance"><span class=secno>3. </span>Conformance</a>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
 
@@ -262,7 +268,25 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
   <p> This specification defines properties to control the geometry of an
    element's <a href="#float-area">float area</a>.
 
-  <h2 id=definitions><span class=secno>2. </span>Definitions</h2>
+  <h3 id=module-interactions><span class=secno>1.1. </span>Module
+   Interactions</h3>
+
+  <p>This module extends the float features defined in <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 9.
+
+  <h3 id=values><span class=secno>1.2. </span>Values</h3>
+
+  <p>This specification follows the CSS property definition conventions from
+   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types
+   not defined in these specifications are defined in CSS Values and Units
+   Module Level 3 [[!CSS3VAL].
+
+  <p>In addition to the property-specific values listed in their definitions,
+   all properties defined in this specification also accept the inherit
+   keyword as their property value. For readability it has not been repeated
+   explicitly.
+
+  <h3 id=definitions><span class=secno>1.3. </span>Definitions</h3>
 
   <p><dfn id=wrap>Wrap</dfn>
 
@@ -283,7 +307,7 @@ <h2 id=definitions><span class=secno>2. </span>Definitions</h2>
    class=property>shape-outside</code></a>’ property can be used to define
    arbitrary, non-rectangular float areas.
 
-  <h2 id=shapes><span class=secno>3. </span>Shapes</h2>
+  <h2 id=shapes><span class=secno>2. </span>Shapes</h2>
 
   <p> Shapes define arbitrary geometric contours around which inline content
    flows. The shape-outside property defines the <a href="#float-area">float
@@ -296,7 +320,7 @@ <h2 id=shapes><span class=secno>3. </span>Shapes</h2>
   <p class=note> A future level of CSS Shapes will define a shape-inside
    property, which will define a shape to wrap content within the element.
 
-  <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
+  <h3 id=relation-to-box-model-and-float-behavior><span class=secno>2.1.
    </span>Relation to the box model and float behavior</h3>
 
   <p> While the boundaries used for wrapping inline flow content outside a
@@ -411,7 +435,7 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
    <img alt="Stacking two floats with a small shape-outside"
    class=singleImgExample src="images/stacked-float-example.png"></div>
 
-  <h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
+  <h3 id=basic-shapes-from-svg-syntax><span class=secno>2.2. </span>Basic
    Shapes</h3>
 
   <p> Shapes can be specified using syntax similar to SVG's <a
@@ -435,7 +459,7 @@ <h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
    recommendation <a href="#SVG11"
    rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>.
 
-  <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
+  <h4 id=supported-basic-shapes><span class=secno>2.2.1. </span>Supported
    Shapes</h4>
 
   <p>The following basic shapes are supported. All basic shapes use
@@ -541,7 +565,7 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
 
   <p>
 
-  <h4 id=basic-shape-syntax><span class=secno>3.2.2. </span>Syntax of Basic
+  <h4 id=basic-shape-syntax><span class=secno>2.2.2. </span>Syntax of Basic
    Shapes</h4>
 
   <pre>
@@ -562,7 +586,7 @@ <h4 id=basic-shape-syntax><span class=secno>3.2.2. </span>Syntax of Basic
 &lt;fill-rule&gt; = nonzero | evenodd 
 </pre>
 
-  <h4 id=basic-shape-interpolation><span class=secno>3.2.3.
+  <h4 id=basic-shape-interpolation><span class=secno>2.2.3.
    </span>Interpolation of Basic Shapes</h4>
 
   <p>For interpolating between one basic shape and a second, the rules
@@ -607,7 +631,7 @@ <h4 id=basic-shape-interpolation><span class=secno>3.2.3.
     </ul>
   </ul>
 
-  <h3 id=shapes-from-image><span class=secno>3.3. </span>Shapes from Image</h3>
+  <h3 id=shapes-from-image><span class=secno>2.3. </span>Shapes from Image</h3>
 
   <p> Another way of defining shapes is by specifying a source image whose
    alpha channel is used to compute the shape. The shape is computed to be
@@ -683,7 +707,7 @@ <h3 id=shapes-from-image><span class=secno>3.3. </span>Shapes from Image</h3>
   </div>
   <!-- End section "Shapes from image" -->
 
-  <h3 id=declaring-shapes><span class=secno>3.4. </span>Declaring Shapes</h3>
+  <h3 id=declaring-shapes><span class=secno>2.4. </span>Declaring Shapes</h3>
 
   <p> Shapes are declared with the ‘<a href="#shape-outside"><code
    class=property>shape-outside</code></a>’ property, with possible
@@ -695,7 +719,7 @@ <h3 id=declaring-shapes><span class=secno>3.4. </span>Declaring Shapes</h3>
    properties changes the geometry of a float element's <a
    href="#float-area">float area</a>.
 
-  <h4 id=shape-outside-property><span class=secno>3.4.1. </span>The ‘<a
+  <h4 id=shape-outside-property><span class=secno>2.4.1. </span>The ‘<a
    href="#shape-outside"><code class=property>shape-outside</code></a>’
    Property</h4>
 
@@ -786,7 +810,7 @@ <h4 id=shape-outside-property><span class=secno>3.4.1. </span>The ‘<a
   </dl>
   <!-- End section "The shape-outside Property" -->
 
-  <h4 id=shape-image-threshold-property><span class=secno>3.4.2. </span>The
+  <h4 id=shape-image-threshold-property><span class=secno>2.4.2. </span>The
    ‘<a href="#shape-image-threshold"><code
    class=property>shape-image-threshold</code></a>’ Property</h4>
 
@@ -863,7 +887,7 @@ <h4 id=shape-image-threshold-property><span class=secno>3.4.2. </span>The
   <!-- End section "The shape-image-threshold property" -->
   <!-- End section "Declaring Shapes" -->
 
-  <h4 id=shape-margin-property><span class=secno>3.4.3. </span>The ‘<a
+  <h4 id=shape-margin-property><span class=secno>2.4.3. </span>The ‘<a
    href="#shape-margin"><code class=property>shape-margin</code></a>’
    property</h4>
 
@@ -955,7 +979,7 @@ <h4 id=shape-margin-property><span class=secno>3.4.3. </span>The ‘<a
   <!-- End secion "shape-margin property" -->
   <!-- End section "Shapes" -->
 
-  <h2 id=conformance><span class=secno>4. </span>Conformance</h2>
+  <h2 id=conformance><span class=secno>3. </span>Conformance</h2>
   <!--begin-conformance-->
 
   <h3 class=no-ref id=conventions> Document conventions</h3>
@@ -1095,6 +1119,16 @@ <h3 class=no-num id=normative-references>Normative references</h3>
    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
+   <dt id=CSS21>[CSS21]
+
+   <dd>Bert Bos; et al. <a
+    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
+    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
+    2011. W3C Recommendation. URL: <a
+    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
+   </dd>
+   <!---->
+
    <dt id=CSS3-IMAGES>[CSS3-IMAGES]
 
    <dd>Elika J. Etemad; Tab Atkins Jr. <a
@@ -1180,59 +1214,59 @@ <h2 class=no-num id=index>Index</h2>
 
   <ul class=indexlist>
    <li>authoring tool, <a href="#authoring-tool"
-    title="section 4."><strong>4.</strong></a>
+    title="section 3."><strong>3.</strong></a>
 
    <li>circle, <a href="#circle"
-    title="section 3.2.1."><strong>3.2.1.</strong></a>
+    title="section 2.2.1."><strong>2.2.1.</strong></a>
 
    <li>ellipse, <a href="#ellipse"
-    title="section 3.2.1."><strong>3.2.1.</strong></a>
+    title="section 2.2.1."><strong>2.2.1.</strong></a>
 
    <li>Float area, <a href="#float-area"
-    title="section 2."><strong>2.</strong></a>
+    title="section 1.3."><strong>1.3.</strong></a>
 
    <li>inset-rectangle, <a href="#inset-rectangle"
-    title="section 3.2.1."><strong>3.2.1.</strong></a>
+    title="section 2.2.1."><strong>2.2.1.</strong></a>
 
    <li>polygon, <a href="#polygon"
-    title="section 3.2.1."><strong>3.2.1.</strong></a>
+    title="section 2.2.1."><strong>2.2.1.</strong></a>
 
    <li>rectangle, <a href="#rectangle"
-    title="section 3.2.1."><strong>3.2.1.</strong></a>
+    title="section 2.2.1."><strong>2.2.1.</strong></a>
 
    <li>renderer, <a href="#renderer"
-    title="section 4."><strong>4.</strong></a>
+    title="section 3."><strong>3.</strong></a>
 
    <li>shape-image-threshold, <a href="#shape-image-threshold"
-    title="section 3.4.2."><strong>3.4.2.</strong></a>
+    title="section 2.4.2."><strong>2.4.2.</strong></a>
     <ul>
      <li>&lt;threshold&gt;, <a href="#ltthresholdgt"
-      title="section 3.4.2."><strong>3.4.2.</strong></a>
+      title="section 2.4.2."><strong>2.4.2.</strong></a>
     </ul>
 
    <li>shape-margin, <a href="#shape-margin"
-    title="section 3.4.3."><strong>3.4.3.</strong></a>
+    title="section 2.4.3."><strong>2.4.3.</strong></a>
 
    <li>shape-outside, <a href="#shape-outside"
-    title="section 3.4.1."><strong>3.4.1.</strong></a>
+    title="section 2.4.1."><strong>2.4.1.</strong></a>
     <ul>
      <li>auto, <a href="#auto"
-      title="section 3.4.1."><strong>3.4.1.</strong></a>
+      title="section 2.4.1."><strong>2.4.1.</strong></a>
 
      <li>&lt;basic-shape&gt;, <a href="#ltbasic-shapegt"
-      title="section 3.4.1."><strong>3.4.1.</strong></a>
+      title="section 2.4.1."><strong>2.4.1.</strong></a>
 
      <li>&lt;image&gt;, <a href="#ltimagegt"
-      title="section 3.4.1."><strong>3.4.1.</strong></a>
+      title="section 2.4.1."><strong>2.4.1.</strong></a>
     </ul>
 
    <li>style sheet
     <ul>
      <li>as conformance class, <a href="#style-sheet"
-      title="section 4."><strong>4.</strong></a>
+      title="section 3."><strong>3.</strong></a>
     </ul>
 
-   <li>Wrap, <a href="#wrap" title="section 2."><strong>2.</strong></a>
+   <li>Wrap, <a href="#wrap" title="section 1.3."><strong>1.3.</strong></a>
   </ul>
   <!--end-index-->
 

css-shapes/Overview.src.html

@@ -117,7 +117,17 @@ <h2 id="intro">Introduction</h2>
         an element's <span>float area</span>.
     </p>
 
-    <h2 id="definitions">Definitions</h2>
+    <h3 id="module-interactions">Module Interactions</h3>
+
+    <p>This module extends the float features defined in [[!CSS21]] chapter 9.</p> 
+
+    <h3 id="values">Values</h3>
+
+    <p>This specification follows the CSS property definition conventions from [[!CSS21]]. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [[!CSS3VAL].</p>
+
+    <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the inherit keyword as their property value. For readability it has not been repeated explicitly.</p>
+
+    <h3 id="definitions">Definitions</h3>
 
     <p><dfn>Wrap</dfn>