[css-shapes] Fixed basic shape grammar to use comma separators

Author: astearns

css-shapes/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Shapes Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-07-12 name=dcterms.date>
+  <meta content=2013-07-15 name=dcterms.date>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -51,7 +51,7 @@
 
    <h1 id=css-shapes-module>CSS Shapes Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 July 2013</h2>
 
    <dl>
     <dt>This version:
@@ -410,41 +410,42 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
 
   <dl>
    <dt><dfn
-    id=rectangle>rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4} [
-    curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )
+    id=rectangle>rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
+    [&lt;length&gt;|&lt;percentage&gt;]]{3,5})
 
    <dd>
     <ul>
-     <li> The four values represent <strong>x, y, width</strong> and
+     <li> The first four values represent <strong>x, y, width</strong> and
       <strong>height</strong>. They define the bounding box of the rectangle.
       Negative values for width and height are invalid.
 
-     <li> The two ‘<code class=property>curve</code>’ values represent
-      <strong> rx</strong> and <strong>ry</strong>. For rounded rectangles
-      they define the x-axis radius and y-axis radius of the ellipse used to
-      round off the corners of the rectangle. Negative values for rx and ry
-      are invalid. See notes below on edge cases for these values.
+     <li> The last two optional values represent <strong> rx</strong> and
+      <strong>ry</strong>. For rounded rectangles they define the x-axis
+      radius and y-axis radius of the ellipse used to round off the corners
+      of the rectangle. Negative values for rx and ry are invalid. See notes
+      below on edge cases for these values.
     </ul>
 
    <dt><dfn
-    id=inset-rectangle>inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4}
-    [ curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )
+    id=inset-rectangle>inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
+    [&lt;length&gt;|&lt;percentage&gt;]]{3,5})
 
    <dd>
     <ul>
-     <li> The four values represent the <strong>top, right, bottom</strong>
-      and <strong>left</strong> insets that define the bounding box of the
-      inset rectangle. Negative values for any of these insets are invalid.
-
-     <li> The two ‘<code class=property>curve</code>’ values represent
-      <strong> rx</strong> and <strong>ry</strong>. For rounded inset
-      rectangles they define the x-axis radius and y-axis radius of the
-      ellipse used to round off the corners of the inset rectangle. Negative
-      values for rx and ry are invalid. See notes below on edge cases for
-      these values.
+     <li> The first four values represent the <strong>top, right,
+      bottom</strong> and <strong>left</strong> insets that define the
+      bounding box of the inset rectangle. Negative values for any of these
+      insets are invalid.
+
+     <li> The last two optional values represent <strong> rx</strong> and
+      <strong>ry</strong>. For rounded inset rectangles they define the
+      x-axis radius and y-axis radius of the ellipse used to round off the
+      corners of the inset rectangle. Negative values for rx and ry are
+      invalid. See notes below on edge cases for these values.
     </ul>
 
-   <dt><dfn id=circle>circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})
+   <dt><dfn id=circle>circle</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
+    [&lt;length&gt;|&lt;percentage&gt;]]{2})
 
    <dd>
     <ul>
@@ -454,7 +455,8 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
       circle. A negative value for r is invalid.
     </ul>
 
-   <dt><dfn id=ellipse>ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4})
+   <dt><dfn id=ellipse>ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;][,
+    [&lt;length&gt;|&lt;percentage&gt;]]{3})
 
    <dd>
     <ul>
@@ -465,8 +467,8 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
       invalid.
     </ul>
 
-   <dt><dfn id=polygon>polygon</dfn>([&lt;fill-rule&gt;,]?
-    [&lt;length&gt;|&lt;percentage&gt;]{2}#)
+   <dt><dfn
+    id=polygon>polygon</dfn>([&lt;fill-rule&gt;,]?[&lt;length&gt;|&lt;percentage&gt;]{2}#)
 
    <dd>
     <ul>
@@ -1293,6 +1295,8 @@ <h3 class=no-num id=since-june-20th-2013>Since <a
    2013</a></h3>
 
   <ul>
+   <li>Fixed basic shape grammar to use comma separators
+
    <li>Remove ‘<code class=css>percentages based on auto-sizing resolve to
     0</code>’
 

css-shapes/Overview.src.html

@@ -305,19 +305,19 @@ <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
       <h4 id="supported-basic-shapes">Supported Shapes</h4>
       <p>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>
+          <dt><dfn id="rectangle">rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{3,5})</dt>
           <dd>
               <ul>
                   <li>
-                      The four values represent 
+                      The first four values represent 
                       <strong>x, y, width</strong> and 
                       <strong>height</strong>.
                       They define the bounding box 
                       of the rectangle. 
                       Negative values for width and height are invalid.
                   </li>
                   <li>
-                      The two 'curve' values represent 
+                      The last two optional values represent 
                       <strong> rx</strong> and <strong>ry</strong>. 
                       For rounded rectangles they define 
                       the x-axis radius and y-axis radius 
@@ -328,19 +328,19 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="inset-rectangle">inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4} [ curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )</dt>
+          <dt><dfn id="inset-rectangle">inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{3,5})</dt>
           <dd>
               <ul>
                   <li>
-                      The four values represent the 
+                      The first four values represent the 
                       <strong>top, right, bottom</strong> and 
                       <strong>left</strong> insets that 
                       define the bounding box 
                       of the inset rectangle. 
                       Negative values for any of these insets are invalid.
                   </li>
                   <li>
-                      The two 'curve' values represent 
+                      The last two optional values represent 
                       <strong> rx</strong> and <strong>ry</strong>. 
                       For rounded inset rectangles they define 
                       the x-axis radius and y-axis radius 
@@ -351,7 +351,7 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="circle">circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})</dt>
+          <dt><dfn id="circle">circle</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{2})</dt>
           <dd>
               <ul>
                   <li>
@@ -366,7 +366,7 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="ellipse">ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4})</dt>
+          <dt><dfn id="ellipse">ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;][, [&lt;length&gt;|&lt;percentage&gt;]]{3})</dt>
           <dd>
               <ul>
                   <li>
@@ -383,7 +383,7 @@ <h4 id="supported-basic-shapes">Supported Shapes</h4>
                   </li>
               </ul>
           </dd>
-          <dt><dfn id="polygon">polygon</dfn>([&lt;fill-rule&gt;,]? [&lt;length&gt;|&lt;percentage&gt;]{2}#)</dt>
+          <dt><dfn id="polygon">polygon</dfn>([&lt;fill-rule&gt;,]?[&lt;length&gt;|&lt;percentage&gt;]{2}#)</dt>
           <dd>
               <ul>
                   <li><strong>fill-rule</strong> - The filling rule used to determine the interior of the
@@ -848,6 +848,7 @@ <h2 class="no-num" id="change-log">Change Log</h2>
 
       <h3 class="no-num" >Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/">June 20th 2013</a></h3>
       <ul>
+          <li>Fixed basic shape grammar to use comma separators</li>
           <li>Remove 'percentages based on auto-sizing resolve to 0'</li>
           <li>Change initial value of shape-image-threshold to 0.0</li>
           <li>Change float positioning to be unaffected by shape-outside</li>