[css-shapes] Defined shape-box instead of redefining box

Author: astearns

css-shapes/Overview.html

@@ -63,7 +63,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140102>2 January 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140103>3 January 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -702,7 +702,11 @@ <h2 class="heading settled heading" data-level=4 id=shapes-from-image><span clas
 <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span class=secno>5 </span><span class=content>
 Shapes from Box Values</span><a class=self-link href=#shapes-from-box-values></a></h2>
 
-<p>	Shapes can be defined by reference to edges in the <a href=http://www.w3.org/TR/CSS21/box.html#box-dimensions>CSS Box Model</a>. These edges include <a href=http://www.w3.org/TR/css3-background/#corner-shaping>border-radius curvature</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>. The definitions of the <dfn class=css-code data-dfn-type=type data-export="" id=typedef-box><a class="production css-code" data-link-type=type href=#typedef-box title="<box>">&lt;box&gt;</a><a class=self-link href=#typedef-box></a></dfn> values are:
+<p>	Shapes can be defined by reference to edges in the <a href=http://www.w3.org/TR/CSS21/box.html#box-dimensions>CSS Box Model</a>. These edges include <a href=http://www.w3.org/TR/css3-background/#corner-shaping>border-radius curvature</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>. The <a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a> value extends the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#box title="<box>">&lt;box&gt;</a> value to include margin-box. Its syntax is:
+
+	<pre>  <dfn class=css-code data-dfn-type=type data-export="" id=typedef-shape-box><a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a><a class=self-link href=#typedef-shape-box></a></dfn> = <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#box title="<box>">&lt;box&gt;</a> | margin-box
+</pre>
+<p>	The definitions of the values are:
 
 <p>	The <dfn data-dfn-type=dfn data-noexport="" id=margin-box>margin-box<a class=self-link href=#margin-box></a></dfn> value defines the shape 
 	enclosed by the outside margin edge. 
@@ -776,7 +780,7 @@ <h2 class="heading settled heading" data-level=6 id=declaring-shapes><span class
 <h3 class="heading settled heading" data-level=6.1 id=shape-outside-property><span class=secno>6.1 </span><span class=content>
 The <a class=property data-link-type=propdesc href=#propdef-shape-outside title=shape-outside>shape-outside</a> Property</span><a class=self-link href=#shape-outside-property></a></h3>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-shape-outside>shape-outside<a class=self-link href=#propdef-shape-outside></a></dfn><tr><th>Value:<td>auto | [<a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> || <a class="production css-code" data-link-type=type href=#typedef-box title="<box>">&lt;box&gt;</a>] | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td>floats<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>computed lengths for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a> with its URI made absolute, otherwise as specified<tr><th>Animatable:<td>as <a href=#basic-shape-interpolation>specified</a> for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, otherwise no</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-shape-outside>shape-outside<a class=self-link href=#propdef-shape-outside></a></dfn><tr><th>Value:<td>auto | [ <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> || <a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a> ] | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td>floats<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>computed lengths for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a> with its URI made absolute, otherwise as specified<tr><th>Animatable:<td>as <a href=#basic-shape-interpolation>specified</a> for <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a>, otherwise no</table>
 <p>		The values of this property have the following meanings:
 
 	<dl data-dfn-for=shape-outside data-dfn-type=value>
@@ -785,7 +789,7 @@ <h3 class="heading settled heading" data-level=6.1 id=shape-outside-property><sp
 			The <a data-link-type=dfn href=#float-area title="float area">float area</a> uses the margin box as normal.
 		</dd>
 
-		<dt><dfn class=css-code data-dfn-for=shape-outside data-dfn-type=value data-export="" id=valuedef-box><a class="production css-code" data-link-type=type href=#typedef-box title="<box>">&lt;box&gt;</a><a class=self-link href=#valuedef-box></a></dfn></dt>
+		<dt><a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a></dt>
 		<dd>
 			If one of these values is specified by itself 
 			the shape is computed based on one of 
@@ -802,7 +806,7 @@ <h3 class="heading settled heading" data-level=6.1 id=shape-outside-property><sp
 		<dd>
 			The shape is computed based on the values of one
 			of <a class=css data-link-type=maybe href=#funcdef-inset title=inset()>inset()</a>, <a class=css data-link-type=maybe href=#funcdef-circle title=circle()>circle()</a>, <a class=css data-link-type=maybe href=#funcdef-ellipse title=ellipse()>ellipse()</a>
-			or <a class=css data-link-type=maybe href=#funcdef-polygon title=polygon()>polygon()</a>. If a <a class="production css-code" data-link-type=type href=#typedef-box title="<box>">&lt;box&gt;</a> is also supplied, this defines the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> for the <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> function. If <a class="production css-code" data-link-type=type href=#typedef-box title="<box>">&lt;box&gt;</a> is not supplied, then the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> defaults to <a class=css data-link-type=maybe href=#margin-box title=margin-box>margin-box</a>.
+			or <a class=css data-link-type=maybe href=#funcdef-polygon title=polygon()>polygon()</a>. If a <a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a> is also supplied, this defines the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> for the <a class="production css-code" data-link-type=type href=#typedef-basic-shape title="<basic-shape>">&lt;basic-shape&gt;</a> function. If <a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a> is not supplied, then the <a data-link-type=dfn href=#reference-box title="reference box">reference box</a> defaults to <a class=css data-link-type=maybe href=#margin-box title=margin-box>margin-box</a>.
 		</dd>
 
 		<dt><dfn class=css-code data-dfn-for=shape-outside data-dfn-type=value data-export="" id=valuedef-image><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>">&lt;image&gt;</a><a class=self-link href=#valuedef-image></a></dfn></dt>
@@ -954,6 +958,7 @@ <h2 class="no-num heading settled heading" id=acknowledgments><span class=conten
 	Hans Muller,
 	Mihnea Ovidenie,
 	Virgil Palanciuc,
+	Robert Sanderson, 
 	Dirk Schulze,
 	Peter Sorotokin,
 	Bear Travis,
@@ -967,6 +972,7 @@ <h2 class="no-num heading settled heading" id=change-log><span class=content>
 <h3 class="no-num heading settled heading" id=20131203><span class=content>
 Since <a href=http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/>December 3rd 2013</a></span><a class=self-link href=#20131203></a></h3>
 	<ul>
+		<li>Defined shape-box instead of redefining box</li>
 		<li>Clarify that shape from image may produce more than one path</li>
 	</ul>
 
@@ -1157,9 +1163,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>&lt;basic-shape&gt;<ul><li>(type), <a href=#typedef-basic-shape title="section 3">3</a>
 <li>value for shape-outside, <a href=#valuedef-basic-shape title="section 6.1">6.1</a>
 </ul><li>border-box, <a href=#border-box title="section 5">5</a>
-<li>&lt;box&gt;<ul><li>(type), <a href=#typedef-box title="section 5">5</a>
-<li>value for shape-outside, <a href=#valuedef-box title="section 6.1">6.1</a>
-</ul><li>circle(), <a href=#funcdef-circle title="section 3.1">3.1</a>
+<li>circle(), <a href=#funcdef-circle title="section 3.1">3.1</a>
 <li>closest-side, <a href=#closest-side title="section 3.1">3.1</a>
 <li>content-box, <a href=#content-box title="section 5">5</a>
 <li>ellipse(), <a href=#funcdef-ellipse title="section 3.1">3.1</a>
@@ -1177,6 +1181,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>polygon(), <a href=#funcdef-polygon title="section 3.1">3.1</a>
 <li>reference box, <a href=#reference-box title="section 3">3</a>
 <li>&lt;shape-arg&gt;, <a href=#typedef-shape-arg title="section 3.1">3.1</a>
+<li>&lt;shape-box&gt;, <a href=#typedef-shape-box title="section 5">5</a>
 <li>shape-image-threshold, <a href=#propdef-shape-image-threshold title="section 6.2">6.2</a>
 <li>shape-margin, <a href=#propdef-shape-margin title="section 6.3">6.3</a>
 <li>shape-outside, <a href=#propdef-shape-outside title="section 6.1">6.1</a>
@@ -1187,7 +1192,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
 Property index</span><a class=self-link href=#property-index></a></h2>
 <div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody>
-<tr><th scope=row><a data-property="">shape-outside</a><td>auto | [&lt;basic-shape&gt; || &lt;box&gt;] | &lt;image&gt;<td>auto<td>floats<td>no<td><td>visual<td>as specified for &lt;basic-shape&gt;, otherwise no<td>computed lengths for &lt;basic-shape&gt;, the &lt;image&gt; with its URI made absolute, otherwise as specified
+<tr><th scope=row><a data-property="">shape-outside</a><td>auto | [ &lt;basic-shape&gt; || &lt;shape-box&gt; ] | &lt;image&gt;<td>auto<td>floats<td>no<td><td>visual<td>as specified for &lt;basic-shape&gt;, otherwise no<td>computed lengths for &lt;basic-shape&gt;, the &lt;image&gt; with its URI made absolute, otherwise as specified
 <tr><th scope=row><a data-property="">shape-image-threshold</a><td>&lt;number&gt;<td>0.0<td>floats<td>no<td><td>visual<td>as number<td>The same as the specified value after clipping the &lt;number&gt; to the range [0.0,1.0]
 <tr><th scope=row><a data-property="">shape-margin</a><td>&lt;length&gt; | &lt;percentage&gt;<td>0<td>floats<td>no<td><td>visual<td>as length, percentage, or calc.<td>the absolute length</table></div>
 

css-shapes/Overview.src.html

@@ -585,7 +585,13 @@ <h2 id="shapes-from-image">
 <h2 id="shapes-from-box-values">
 Shapes from Box Values</h2>
 
-	Shapes can be defined by reference to edges in the <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS Box Model</a>. These edges include <a href="http://www.w3.org/TR/css3-background/#corner-shaping">border-radius curvature</a> [[!CSS3BG]]. The definitions of the <dfn><<box>></dfn> values are:
+	Shapes can be defined by reference to edges in the <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS Box Model</a>. These edges include <a href="http://www.w3.org/TR/css3-background/#corner-shaping">border-radius curvature</a> [[!CSS3BG]]. The <<shape-box>> value extends the <<box>> value to include margin-box. Its syntax is:
+
+	<pre>
+		<dfn><<shape-box>></dfn> = <<box>> | margin-box
+	</pre>
+
+	The definitions of the values are:
 
 	The <dfn>margin-box</dfn> value defines the shape 
 	enclosed by the outside margin edge. 
@@ -663,7 +669,7 @@ <h3 id="shape-outside-property">
 
 	<pre class='propdef'>
 		Name: shape-outside
-		Value: auto | [<<basic-shape>> || <<box>>] | <<image>>
+		Value: auto | [ <<basic-shape>> || <<shape-box>> ] | <<image>>
 		Initial: auto
 		Applies To: floats
 		Inherited: no
@@ -680,7 +686,7 @@ <h3 id="shape-outside-property">
 			The <a>float area</a> uses the margin box as normal.
 		</dd>
 
-		<dt><dfn><<box>></dfn></dt>
+		<dt><<shape-box>></dt>
 		<dd>
 			If one of these values is specified by itself 
 			the shape is computed based on one of 
@@ -697,7 +703,7 @@ <h3 id="shape-outside-property">
 		<dd>
 			The shape is computed based on the values of one
 			of ''inset()'', ''circle()'', ''ellipse()''
-			or ''polygon()''. If a <<box>> is also supplied, this defines the <a>reference box</a> for the <<basic-shape>> function. If <<box>> is not supplied, then the <a>reference box</a> defaults to ''margin-box''.
+			or ''polygon()''. If a <<shape-box>> is also supplied, this defines the <a>reference box</a> for the <<basic-shape>> function. If <<shape-box>> is not supplied, then the <a>reference box</a> defaults to ''margin-box''.
 		</dd>
 
 		<dt><dfn><<image>></dfn></dt>
@@ -874,6 +880,7 @@ <h2 class="no-num" id="acknowledgments">
 	Hans Muller,
 	Mihnea Ovidenie,
 	Virgil Palanciuc,
+	Robert Sanderson, 
 	Dirk Schulze,
 	Peter Sorotokin,
 	Bear Travis,
@@ -887,6 +894,7 @@ <h2 class="no-num" id="change-log">
 <h3 class="no-num" id="20131203">
 Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/">December 3rd 2013</a></h3>
 	<ul>
+		<li>Defined shape-box instead of redefining box</li>
 		<li>Clarify that shape from image may produce more than one path</li>
 	</ul>