[css-exclusions] add inset rectangle to basic shapes
authorAlan Stearns <stearns@adobe.com>
Mon, 22 Apr 2013 17:29:40 -0700
changeset 79842e18178b6451
parent 7983 79de02f02306
child 7985 1afcc421d5aa
[css-exclusions] add inset rectangle to basic shapes
css-exclusions/Exclusions.src.html
css-exclusions/Overview.html
     1.1 --- a/css-exclusions/Exclusions.src.html	Mon Apr 22 17:07:17 2013 -0700
     1.2 +++ b/css-exclusions/Exclusions.src.html	Mon Apr 22 17:29:40 2013 -0700
     1.3 @@ -1203,6 +1203,28 @@
     1.4                    </li>
     1.5                </ul>
     1.6            </dd>
     1.7 +          <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>
     1.8 +          <dd>
     1.9 +              <ul>
    1.10 +                  <li>
    1.11 +                      The four values represent the 
    1.12 +                      <strong>top, right, bottom</strong> and 
    1.13 +                      <strong>left</strong> insets that 
    1.14 +                      define the bounding box 
    1.15 +                      of the inset rectangle. 
    1.16 +                      Negative values for any of these insets are invalid.
    1.17 +                  </li>
    1.18 +                  <li>
    1.19 +                      The two 'curve' values represent 
    1.20 +                      <strong> rx</strong> and <strong>ry</strong>. 
    1.21 +                      For rounded inset rectangles they define 
    1.22 +                      the x-axis radius and y-axis radius 
    1.23 +                      of the ellipse used to round off 
    1.24 +                      the corners of the inset rectangle. 
    1.25 +                      Negative values for rx and ry are invalid.
    1.26 +                  </li>
    1.27 +              </ul>
    1.28 +          </dd>
    1.29            <dt><dfn id="circle">circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})</dt>
    1.30            <dd>
    1.31                <ul>
    1.32 @@ -1328,6 +1350,9 @@
    1.33                  <li>Set the values for rx and ry on the temporary rectangle to ‘50%’.</li>
    1.34                  <li>Interpolate between the two rectangles as above.</li></ul>
    1.35              </li>
    1.36 +            <li>If one basic shape is an inset-rectangle and the second is of type rectangle, circle or ellipse:
    1.37 +                <ul><li>Replace the inset-rectangle with a temporary rectangle of equal dimension.</li>
    1.38 +                <li>Interpolate between the basic shapes as above.</li></ul>
    1.39              <li>If both basic shapes are of type polygon and if both polygons have the same number of vertices:
    1.40                  <ul><li>Interpolate between each value.</li></ul>
    1.41              </li>
    1.42 @@ -1501,7 +1526,7 @@
    1.43        <dl>
    1.44            <dt><dfn title="'shape-outside'!!'&lt;basic-shape&gt;'">&lt;basic-shape&gt;</dfn></dt>
    1.45            <dd>
    1.46 -              The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse'
    1.47 +              The shape is computed based on the values of one of 'rectangle', 'inset-rectangle', 'circle', 'ellipse'
    1.48                or 'polygon'.
    1.49            </dd>
    1.50        </dl>
    1.51 @@ -1629,7 +1654,7 @@
    1.52      <dl>
    1.53          <dt><dfn title="'shape-inside'!!'&lt;basic-shape&gt;'">&lt;basic-shape&gt;</dfn></dt>
    1.54          <dd>
    1.55 -            The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse'
    1.56 +            The shape is computed based on the values of one of 'rectangle', 'inset-rectangle', 'circle', 'ellipse'
    1.57              or 'polygon'.
    1.58          </dd>
    1.59      </dl>
    1.60 @@ -1952,6 +1977,7 @@
    1.61        
    1.62        <h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
    1.63        <ul>
    1.64 +          <li>added inset-rectangle() to basic shapes</li>
    1.65            <li>Changed shape-inside overflow diagrams to show exclusion behavior</li>
    1.66            <li>Changed shape-inside to contribute to the wrapping context</li>
    1.67            <li>Defined exclusion edges relative to wrapping content's writing mode</li>
     2.1 --- a/css-exclusions/Overview.html	Mon Apr 22 17:07:17 2013 -0700
     2.2 +++ b/css-exclusions/Overview.html	Mon Apr 22 17:29:40 2013 -0700
     2.3 @@ -13,7 +13,7 @@
     2.4    <meta content="CSS Exclusions and Shapes Module Level 3"
     2.5     name=dcterms.title>
     2.6    <meta content=text name=dcterms.type>
     2.7 -  <meta content=2013-04-16 name=dcterms.date>
     2.8 +  <meta content=2013-04-23 name=dcterms.date>
     2.9    <meta content="Vincent Hardy" name=dcterms.creator>
    2.10    <meta content="Rossen Atanassov" name=dcterms.creator>
    2.11    <meta content="Alan Stearns" name=dcterms.creator>
    2.12 @@ -56,14 +56,14 @@
    2.13  
    2.14     <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
    2.15  
    2.16 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 April 2013</h2>
    2.17 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 April 2013</h2>
    2.18  
    2.19     <dl>
    2.20      <dt>This version:
    2.21  
    2.22      <dd><a
    2.23       href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
    2.24 -    <!--<dd><a href="http://dev.w3.org/csswg/css3-exclusions/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130416/</a></dd>-->
    2.25 +    <!--<dd><a href="http://dev.w3.org/csswg/css3-exclusions/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130423/</a></dd>-->
    2.26  
    2.27      <dt>Latest version:
    2.28  
    2.29 @@ -1595,6 +1595,23 @@
    2.30        are invalid.
    2.31      </ul>
    2.32  
    2.33 +   <dt><dfn
    2.34 +    id=inset-rectangle>inset-rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4}
    2.35 +    [ curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )
    2.36 +
    2.37 +   <dd>
    2.38 +    <ul>
    2.39 +     <li> The four values represent the <strong>top, right, bottom</strong>
    2.40 +      and <strong>left</strong> insets that define the bounding box of the
    2.41 +      inset rectangle. Negative values for any of these insets are invalid.
    2.42 +
    2.43 +     <li> The two ‘<code class=property>curve</code>’ values represent
    2.44 +      <strong> rx</strong> and <strong>ry</strong>. For rounded inset
    2.45 +      rectangles they define the x-axis radius and y-axis radius of the
    2.46 +      ellipse used to round off the corners of the inset rectangle. Negative
    2.47 +      values for rx and ry are invalid.
    2.48 +    </ul>
    2.49 +
    2.50     <dt><dfn id=circle>circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})
    2.51  
    2.52     <dd>
    2.53 @@ -1713,6 +1730,15 @@
    2.54       <li>Interpolate between the two rectangles as above.
    2.55      </ul>
    2.56  
    2.57 +   <li>If one basic shape is an inset-rectangle and the second is of type
    2.58 +    rectangle, circle or ellipse:
    2.59 +    <ul>
    2.60 +     <li>Replace the inset-rectangle with a temporary rectangle of equal
    2.61 +      dimension.
    2.62 +
    2.63 +     <li>Interpolate between the basic shapes as above.
    2.64 +    </ul>
    2.65 +
    2.66     <li>If both basic shapes are of type polygon and if both polygons have the
    2.67      same number of vertices:
    2.68      <ul>
    2.69 @@ -1936,9 +1962,11 @@
    2.70  
    2.71     <dd> The shape is computed based on the values of one of ‘<a
    2.72      href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
    2.73 -    href="#circle"><code class=property>circle</code></a>’, ‘<a
    2.74 -    href="#ellipse"><code class=property>ellipse</code></a>’ or ‘<a
    2.75 -    href="#polygon"><code class=property>polygon</code></a>’.
    2.76 +    href="#inset-rectangle"><code
    2.77 +    class=property>inset-rectangle</code></a>’, ‘<a href="#circle"><code
    2.78 +    class=property>circle</code></a>’, ‘<a href="#ellipse"><code
    2.79 +    class=property>ellipse</code></a>’ or ‘<a href="#polygon"><code
    2.80 +    class=property>polygon</code></a>’.
    2.81    </dl>
    2.82  
    2.83    <dl>
    2.84 @@ -2075,9 +2103,11 @@
    2.85  
    2.86     <dd> The shape is computed based on the values of one of ‘<a
    2.87      href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
    2.88 -    href="#circle"><code class=property>circle</code></a>’, ‘<a
    2.89 -    href="#ellipse"><code class=property>ellipse</code></a>’ or ‘<a
    2.90 -    href="#polygon"><code class=property>polygon</code></a>’.
    2.91 +    href="#inset-rectangle"><code
    2.92 +    class=property>inset-rectangle</code></a>’, ‘<a href="#circle"><code
    2.93 +    class=property>circle</code></a>’, ‘<a href="#ellipse"><code
    2.94 +    class=property>ellipse</code></a>’ or ‘<a href="#polygon"><code
    2.95 +    class=property>polygon</code></a>’.
    2.96    </dl>
    2.97  
    2.98    <dl>
    2.99 @@ -2658,6 +2688,9 @@
   2.100     <li>Float area, <a href="#float-area"
   2.101      title="section 2."><strong>2.</strong></a>
   2.102  
   2.103 +   <li>inset-rectangle, <a href="#inset-rectangle"
   2.104 +    title="section 4.2.1."><strong>4.2.1.</strong></a>
   2.105 +
   2.106     <li>outside-inside, <a href="#outside-and-inside"
   2.107      title="section 2."><strong>2.</strong></a>
   2.108  
   2.109 @@ -2917,6 +2950,8 @@
   2.110     2012</a></h3>
   2.111  
   2.112    <ul>
   2.113 +   <li>added inset-rectangle() to basic shapes
   2.114 +
   2.115     <li>Changed shape-inside overflow diagrams to show exclusion behavior
   2.116  
   2.117     <li>Changed shape-inside to contribute to the wrapping context