[css-exclusions] add inset rectangle to basic shapes

Author: astearns

css-exclusions/Exclusions.src.html

@@ -1203,6 +1203,28 @@ <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>
+          <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>
+                  <li>
+                      The two 'curve' 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.
+                  </li>
+              </ul>
+          </dd>
           <dt><dfn id="circle">circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})</dt>
           <dd>
               <ul>
@@ -1328,6 +1350,9 @@ <h4 id='basic-shape-interpolation'>Interpolation of Basic Shapes</h4>
                 <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 one basic shape is an inset-rectangle and the second is of type rectangle, circle or ellipse:
+                <ul><li>Replace the inset-rectangle with a temporary rectangle of equal dimension.</li>
+                <li>Interpolate between the basic shapes as above.</li></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.</li></ul>
             </li>
@@ -1501,7 +1526,7 @@ <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
       <dl>
           <dt><dfn title="'shape-outside'!!'&lt;basic-shape&gt;'">&lt;basic-shape&gt;</dfn></dt>
           <dd>
-              The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse'
+              The shape is computed based on the values of one of 'rectangle', 'inset-rectangle', 'circle', 'ellipse'
               or 'polygon'.
           </dd>
       </dl>
@@ -1629,7 +1654,7 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
     <dl>
         <dt><dfn title="'shape-inside'!!'&lt;basic-shape&gt;'">&lt;basic-shape&gt;</dfn></dt>
         <dd>
-            The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse'
+            The shape is computed based on the values of one of 'rectangle', 'inset-rectangle', 'circle', 'ellipse'
             or 'polygon'.
         </dd>
     </dl>
@@ -1952,6 +1977,7 @@ <h2 class="no-num" id="change-log">Change Log</h2>
 
       <h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
       <ul>
+          <li>added inset-rectangle() to basic shapes</li>
           <li>Changed shape-inside overflow diagrams to show exclusion behavior</li>
           <li>Changed shape-inside to contribute to the wrapping context</li>
           <li>Defined exclusion edges relative to wrapping content's writing mode</li>

css-exclusions/Overview.html

@@ -13,7 +13,7 @@
   <meta content="CSS Exclusions and Shapes Module Level 3"
    name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-04-16 name=dcterms.date>
+  <meta content=2013-04-23 name=dcterms.date>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -56,14 +56,14 @@
 
    <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 16 April 2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 April 2013</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://dev.w3.org/csswg/css3-exclusions/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130416/</a></dd>-->
+    <!--<dd><a href="http://dev.w3.org/csswg/css3-exclusions/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130423/</a></dd>-->
 
     <dt>Latest version:
 
@@ -1595,6 +1595,23 @@ <h4 id=supported-basic-shapes><span class=secno>4.2.1. </span>Supported
       are invalid.
     </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} ]? )
+
+   <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.
+    </ul>
+
    <dt><dfn id=circle>circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})
 
    <dd>
@@ -1713,6 +1730,15 @@ <h4 id=basic-shape-interpolation><span class=secno>4.2.3.
      <li>Interpolate between the two rectangles as above.
     </ul>
 
+   <li>If one basic shape is an inset-rectangle and the second is of type
+    rectangle, circle or ellipse:
+    <ul>
+     <li>Replace the inset-rectangle with a temporary rectangle of equal
+      dimension.
+
+     <li>Interpolate between the basic shapes as above.
+    </ul>
+
    <li>If both basic shapes are of type polygon and if both polygons have the
     same number of vertices:
     <ul>
@@ -1936,9 +1962,11 @@ <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a
 
    <dd> The shape is computed based on the values of one of ‘<a
     href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
-    href="#circle"><code class=property>circle</code></a>’, ‘<a
-    href="#ellipse"><code class=property>ellipse</code></a>’ or ‘<a
-    href="#polygon"><code class=property>polygon</code></a>’.
+    href="#inset-rectangle"><code
+    class=property>inset-rectangle</code></a>’, ‘<a href="#circle"><code
+    class=property>circle</code></a>’, ‘<a href="#ellipse"><code
+    class=property>ellipse</code></a>’ or ‘<a href="#polygon"><code
+    class=property>polygon</code></a>’.
   </dl>
 
   <dl>
@@ -2075,9 +2103,11 @@ <h4 id=shape-inside-property><span class=secno>4.4.2. </span>The ‘<a
 
    <dd> The shape is computed based on the values of one of ‘<a
     href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
-    href="#circle"><code class=property>circle</code></a>’, ‘<a
-    href="#ellipse"><code class=property>ellipse</code></a>’ or ‘<a
-    href="#polygon"><code class=property>polygon</code></a>’.
+    href="#inset-rectangle"><code
+    class=property>inset-rectangle</code></a>’, ‘<a href="#circle"><code
+    class=property>circle</code></a>’, ‘<a href="#ellipse"><code
+    class=property>ellipse</code></a>’ or ‘<a href="#polygon"><code
+    class=property>polygon</code></a>’.
   </dl>
 
   <dl>
@@ -2658,6 +2688,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>Float area, <a href="#float-area"
     title="section 2."><strong>2.</strong></a>
 
+   <li>inset-rectangle, <a href="#inset-rectangle"
+    title="section 4.2.1."><strong>4.2.1.</strong></a>
+
    <li>outside-inside, <a href="#outside-and-inside"
     title="section 2."><strong>2.</strong></a>
 
@@ -2917,6 +2950,8 @@ <h3 class=no-num id=since-may-3rd-2012>Since <a
    2012</a></h3>
 
   <ul>
+   <li>added inset-rectangle() to basic shapes
+
    <li>Changed shape-inside overflow diagrams to show exclusion behavior
 
    <li>Changed shape-inside to contribute to the wrapping context