[css-exclusions] shape interpolation and box-sizing

Author: astearns

css3-exclusions/Exclusions.src.html

@@ -1147,24 +1147,25 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
       <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
       <p>
           Shapes can be specified using 
-          syntax similar to <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>. 
+          syntax similar to SVG's <a href="http://www.w3.org/TR/SVG/shapes.html">basic shapes</a>. 
           The definitions use 
           <code><a href="http://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a></code> type 
           and the <code><a href="">&lt;percentage&gt;</a></code> types (see [[!CSS3VAL]]). 
           Percentages are resolved 
-          from the border box 
-          of the element to which the property applies. 
+          from the computed value of the 
+          <a href="http://www.w3.org/TR/css3-ui/#box-sizing">'box-sizing'</a>
+          property [[!CSS3UI]] 
+          on the element to which the property applies. 
           For the radius <code>r</code> of the <code>circle</code> shape, 
           a percentage value is resolved as
           <a href="http://www.w3.org/TR/SVG/coords.html#Units">specified</a> 
           in the SVG recommendation (see [[!SVG11]]). 
-		  SVG strokes are not considered part of the shape, 
-          thus only the following geometries are valid.
+          Path styling like stroking is not considered part of the specified shape.
       </p>
 
 
       <h4 id="supported-basic-shapes">Supported Shapes</h4>
-      The following SVG shapes are supported by the CSS shapes module.
+      The following basic shapes are supported.
       <dl>
           <dt><dfn id="rectangle">rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4} [ curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )</dt>
           <dd>
@@ -1223,17 +1224,17 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
           <dt><dfn id="polygon">polygon</dfn>([&lt;fill-rule&gt;,]? [&lt;length&gt;|&lt;percentage&gt;]{2}#)</dt>
           <dd>
               <ul>
-                  <li><strong>fillRule</strong> - The filling rule used to determine the interior of the
+                  <li><strong>fill-rule</strong> - The filling rule used to determine the interior of the
                       polygon. See <a href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property in SVG for details. Possible values are nonzero
                       or evenodd. Default value when omitted is nonzero.</li>
                   <li>
                       The two length values represent <strong>xi</strong> and <strong>yi</strong> - 
                       the <strong>x</strong> and <strong>y</strong> axis coordinates of the i-th vertex of the polygon.
                   </li>
               </ul>
-              <p>
-                  If the polygon is not closed the user-agent will automatically add a new vertex
-                  at the end.</p>
+              <p>The UA will close a polygon 
+                by connecting the last vertex 
+                with the first vertex of the list.</p>
               <br/>
           </dd>
       </dl>
@@ -1274,15 +1275,52 @@ <h4 id='referencing-svg-shapes'>Referencing SVG shapes</h4>
           </pre></code>
       </div>
         <p>
-            When using the SVG syntax or referencing SVG elements to define shapes, all the
-            lengths expressed in percentages are resolved from the border box of the element.
-            The coordinate system for the shape has its origin on the top-left corner of the
-            border box with the x-axis running to the right and the y-axis running downwards.
-            If the SVG element uses unitless coordinate values, they are equivalent to using
-            'px' units. If the border box of the element is dependent on auto sizing (i.e.,
-            the element's 'width' or 'height' property is 'auto'), then the percentage values
+            When using the SVG syntax 
+            or referencing SVG elements 
+            to define shapes, 
+            the relevant box is determined 
+            by the computed value of the 
+            <a href="http://www.w3.org/TR/css3-ui/#box-sizing">'box-sizing'</a>
+            property. 
+            All the lengths expressed in percentages 
+            are resolved from the relevant box. 
+            The coordinate system for the shape 
+            has its origin on the top-left corner of the
+            relevant box with the x-axis 
+            running to the right 
+            and the y-axis running downwards.
+            If the SVG element uses unitless coordinate values, 
+            they are equivalent to using
+            'px' units. 
+            If the relevant box of the element 
+            is dependent on auto sizing 
+            (i.e., the element's 'width' or 'height' property is 'auto'), 
+            then the percentage values
             resolve to 0.
         </p>
+
+      <h4 id='basic-shape-interpolation'>Interpolation of Basic Shapes</h4>
+
+        <p>For interpolating between 
+            one basic shape and a second, 
+            the rules described below are applied. 
+        </p>
+        <ul>
+            <li>If both basic shapes are of the same type and not of type polygon:
+                <ul><li>Interpolate between each value.</li></ul>
+            </li>
+            <li>If one basic shape is of type rectangle and the second of type circle or ellipse:
+                <ul><li>Replace the circle/ellipse with a temporary rectangle of equal dimension.</li>
+                <li>Set the values for rx and ry on the temporary rectangle to ‘50%’.</li>
+                <li>Interpolate between the two rectangles as above.</li></ul>
+            </li>
+            <li>If both basic shapes are of type polygon and if both polygons have the same number of vertices:
+                <ul><li>Interpolate between each value.</li></ul>
+            </li>
+            <li>In all other cases:
+                <ul><li>No interpolation is specified.</li></ul></li>
+            </ul>
+
         <!-- End section "Shapes from SVG Syntax -->
 
       <h3 id="shapes-from-image">Shapes from Image</h3>
@@ -1446,7 +1484,9 @@ <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
       <p>The values of this property have the following meanings:</p>
       <dl>
           <dt><dfn title="'shape-outside'!!'auto'">auto</dfn></dt>
-          <dd>The shape is computed based on the border box of the element.</dd>
+          <dd>The shape is computed 
+            based on the border box of the element for exclusions, 
+            or computed based on the margin box for floats.</dd>
       </dl>
       <dl>
           <dt><dfn title="'shape-outside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn></dt>
@@ -2055,6 +2095,8 @@ <h2 class="no-num" id="change-log">Change Log</h2>
 
       <h3>Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
       <ul>
+          <li>Added interpolation for basic shapes</li>
+          <li>Changed basic shapes to depend on box specified with box-sizing</li>
           <li>Added overflow behavior for shape-inside.</li>
           <li>Added wrap-flow:minimum.</li>
           <li>Clarified processing model.</li>

css3-exclusions/Overview.html

@@ -13,11 +13,11 @@
   <meta content="CSS Exclusions and Shapes Module Level 3"
    name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2012-11-29 name=dcterms.issued>
+  <meta content=2012-12-01 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-exclusions/"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121129/"
+  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121201/"
    name=dcterms.identifier>
   <link href="../shared/style/default.css" rel=stylesheet type="text/css">
   <script defer=defer
@@ -55,15 +55,15 @@
 
    <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 December
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
-    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121129/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121129/</a></dd>-->
+    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121201/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121201/</a></dd>-->
 
     <dt>Latest version:
 
@@ -286,6 +286,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
        <li><a href="#referencing-svg-shapes"><span class=secno>4.2.2.
         </span>Referencing SVG shapes</a>
+
+       <li><a href="#basic-shape-interpolation"><span class=secno>4.2.3.
+        </span>Interpolation of Basic Shapes</a>
       </ul>
 
      <li><a href="#shapes-from-image"><span class=secno>4.3. </span>Shapes
@@ -1575,26 +1578,28 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>4.1.
   <h3 id=basic-shapes-from-svg-syntax><span class=secno>4.2. </span>Basic
    Shapes</h3>
 
-  <p> Shapes can be specified using syntax similar to <a
-   href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>. The
+  <p> Shapes can be specified using syntax similar to SVG's <a
+   href="http://www.w3.org/TR/SVG/shapes.html">basic shapes</a>. The
    definitions use <code><a
    href="http://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a></code>
    type and the <code><a href="">&lt;percentage&gt;</a></code> types (see <a
    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>).
-   Percentages are resolved from the border box of the element to which the
+   Percentages are resolved from the computed value of the <a
+   href="http://www.w3.org/TR/css3-ui/#box-sizing">‘<code
+   class=property>box-sizing</code>’</a> property <a href="#CSS3UI"
+   rel=biblioentry>[CSS3UI]<!--{{!CSS3UI}}--></a> on the element to which the
    property applies. For the radius <code>r</code> of the <a
    href="#circle"><code>circle</code></a> shape, a percentage value is
    resolved as <a
    href="http://www.w3.org/TR/SVG/coords.html#Units">specified</a> in the SVG
    recommendation (see <a href="#SVG11"
-   rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>). SVG strokes are not
-   considered part of the shape, thus only the following geometries are
-   valid.
+   rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>). Path styling like stroking
+   is not considered part of the specified shape.
 
   <h4 id=supported-basic-shapes><span class=secno>4.2.1. </span>Supported
    Shapes</h4>
 
-  <p> The following SVG shapes are supported by the CSS shapes module.
+  <p> The following basic shapes are supported.
 
   <dl>
    <dt><dfn
@@ -1640,7 +1645,7 @@ <h4 id=supported-basic-shapes><span class=secno>4.2.1. </span>Supported
 
    <dd>
     <ul>
-     <li><strong>fillRule</strong> - The filling rule used to determine the
+     <li><strong>fill-rule</strong> - The filling rule used to determine the
       interior of the polygon. See <a
       href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a>
       property in SVG for details. Possible values are nonzero or evenodd.
@@ -1651,8 +1656,8 @@ <h4 id=supported-basic-shapes><span class=secno>4.2.1. </span>Supported
       axis coordinates of the i-th vertex of the polygon.
     </ul>
 
-    <p> If the polygon is not closed the user-agent will automatically add a
-     new vertex at the end.</p>
+    <p>The UA will close a polygon by connecting the last vertex with the
+     first vertex of the list.</p>
     <br>
   </dl>
 
@@ -1695,15 +1700,54 @@ <h4 id=referencing-svg-shapes><span class=secno>4.2.2. </span>Referencing
   </div>
 
   <p> When using the SVG syntax or referencing SVG elements to define shapes,
-   all the lengths expressed in percentages are resolved from the border box
-   of the element. The coordinate system for the shape has its origin on the
-   top-left corner of the border box with the x-axis running to the right and
-   the y-axis running downwards. If the SVG element uses unitless coordinate
-   values, they are equivalent to using ‘<code class=property>px</code>’
-   units. If the border box of the element is dependent on auto sizing (i.e.,
-   the element's ‘<code class=property>width</code>’ or ‘<code
+   the relevant box is determined by the computed value of the <a
+   href="http://www.w3.org/TR/css3-ui/#box-sizing">‘<code
+   class=property>box-sizing</code>’</a> property. All the lengths
+   expressed in percentages are resolved from the relevant box. The
+   coordinate system for the shape has its origin on the top-left corner of
+   the relevant box with the x-axis running to the right and the y-axis
+   running downwards. If the SVG element uses unitless coordinate values,
+   they are equivalent to using ‘<code class=property>px</code>’ units.
+   If the relevant box of the element is dependent on auto sizing (i.e., the
+   element's ‘<code class=property>width</code>’ or ‘<code
    class=property>height</code>’ property is ‘<code
-   class=property>auto</code>’), then the percentage values resolve to 0.</p>
+   class=property>auto</code>’), then the percentage values resolve to 0.
+
+  <h4 id=basic-shape-interpolation><span class=secno>4.2.3.
+   </span>Interpolation of Basic Shapes</h4>
+
+  <p>For interpolating between one basic shape and a second, the rules
+   described below are applied.
+
+  <ul>
+   <li>If both basic shapes are of the same type and not of type polygon:
+    <ul>
+     <li>Interpolate between each value.
+    </ul>
+
+   <li>If one basic shape is of type rectangle and the second of type circle
+    or ellipse:
+    <ul>
+     <li>Replace the circle/ellipse with a temporary rectangle of equal
+      dimension.
+
+     <li>Set the values for rx and ry on the temporary rectangle to
+      ‘50%’.
+
+     <li>Interpolate between the two rectangles as above.
+    </ul>
+
+   <li>If both basic shapes are of type polygon and if both polygons have the
+    same number of vertices:
+    <ul>
+     <li>Interpolate between each value.
+    </ul>
+
+   <li>In all other cases:
+    <ul>
+     <li>No interpolation is specified.
+    </ul>
+  </ul>
   <!-- End section "Shapes from SVG Syntax -->
 
   <h3 id=shapes-from-image><span class=secno>4.3. </span>Shapes from Image</h3>
@@ -1912,7 +1956,8 @@ <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a
   <dl>
    <dt><dfn id=auto0 title="'shape-outside'!!'auto'">auto</dfn>
 
-   <dd>The shape is computed based on the border box of the element.
+   <dd>The shape is computed based on the border box of the element for
+    exclusions, or computed based on the margin box for floats.
   </dl>
 
   <dl>
@@ -2586,6 +2631,16 @@ <h3 class=no-num id=normative-references>Normative references</h3>
    </dd>
    <!---->
 
+   <dt id=CSS3UI>[CSS3UI]
+
+   <dd>Tantek Çelik. <a
+    href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"><cite>CSS Basic
+    User Interface Module Level 3 (CSS3 UI).</cite></a> 17 January 2012. W3C
+    Working Draft. (Work in progress.) URL: <a
+    href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a>
+   </dd>
+   <!---->
+
    <dt id=CSS3VAL>[CSS3VAL]
 
    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
@@ -2940,6 +2995,10 @@ <h3 id=since-may-3rd-2012><span class=secno>5.7. </span>Since <a
    2012</a></h3>
 
   <ul>
+   <li>Added interpolation for basic shapes
+
+   <li>Changed basic shapes to depend on box specified with box-sizing
+
    <li>Added overflow behavior for shape-inside.
 
    <li>Added wrap-flow:minimum.