[css-shapes] change auto to none for shape-outside

Author: astearns

css-shapes/Overview.html

@@ -229,7 +229,11 @@ <h3 class="heading settled heading" data-level=1.4 id=terminology><span class=se
 	to determine where content flows.
 	By default,
 	the <a data-link-type=dfn href=#float-area title="float area">float area</a> is the float element’s
-	<a href=http://www.w3.org/TR/CSS2/box.html#box-dimensions>margin box</a>.
+	<a href=http://www.w3.org/TR/CSS2/box.html#box-dimensions>margin box</a> 
+	(note this can be different than 
+	the <a data-link-type=dfn href=#float-area title="float area">float area</a> produced 
+	by the <a class=css data-link-type=maybe href=#margin-box title=margin-box>margin-box</a> value, 
+	which includes border-radius curvature).
 	This specification’s <a class=property data-link-type=propdesc href=#propdef-shape-outside title=shape-outside>shape-outside</a> property
 	can be used to define an arbitrary,
 	non-rectangular <a data-link-type=dfn href=#float-area title="float area">float area</a>.
@@ -642,7 +646,7 @@ <h2 class="heading settled heading" data-level=4 id=shapes-from-image><span clas
 <p>	The image is sized and positioned 
 	as if it were a replaced element 
 	with a specified width and height 
-	of the element’s used content-box size.
+	of the element’s used content box size.
 
 <p>	For animated raster image formats (such as
 	<a href=http://www.w3.org/Graphics/GIF/spec-gif89a.txt>GIF</a>),
@@ -702,9 +706,9 @@ <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 <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:
+<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 <a class=css data-link-type=maybe href=#margin-box title=margin-box>margin-box</a>. 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>  <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> | <a class=css data-link-type=maybe href=#margin-box title=margin-box>margin-box</a>
 </pre>
 <p>	The definitions of the values are:
 
@@ -737,10 +741,10 @@ <h2 class="heading settled heading" data-level=5 id=shapes-from-box-values><span
 		the box values define these shapes:
 
 <p>		<ul>
-			<li>margin-box: the shape containing all of the yellow pixels</li>
-			<li>border-box: the shape containing all of the black pixels</li>
-			<li>padding-box: the shape containing all of the mauve pixels</li>
-			<li>content-box: the shape containing all of the blue pixels</li>
+			<li><a class=css data-link-type=maybe href=#margin-box title=margin-box>margin-box</a>: the shape containing all of the yellow pixels</li>
+			<li><a class=css data-link-type=maybe href=#border-box title=border-box>border-box</a>: the shape containing all of the black pixels</li>
+			<li><a class=css data-link-type=maybe href=#padding-box title=padding-box>padding-box</a>: the shape containing all of the mauve pixels</li>
+			<li><a class=css data-link-type=maybe href=#content-box title=content-box>content-box</a>: the shape containing all of the blue pixels</li>
 		</ul>
 
 		<div class=figure>
@@ -780,13 +784,13 @@ <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-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>
+<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>none | [ <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>none<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>
-		<dt><dfn class=css-code data-dfn-for=shape-outside data-dfn-type=value data-export="" id=valuedef-auto>auto<a class=self-link href=#valuedef-auto></a></dfn></dt>
+		<dt><dfn class=css-code data-dfn-for=shape-outside data-dfn-type=value data-export="" id=valuedef-none>none<a class=self-link href=#valuedef-none></a></dfn></dt>
 		<dd>
-			The <a data-link-type=dfn href=#float-area title="float area">float area</a> uses the margin box as normal.
+			The <a data-link-type=dfn href=#float-area title="float area">float area</a> is unaffected.
 		</dd>
 
 		<dt><a class="production css-code" data-link-type=type href=#typedef-shape-box title="<shape-box>">&lt;shape-box&gt;</a></dt>
@@ -830,7 +834,7 @@ <h3 class="heading settled heading" data-level=6.1 id=shape-outside-property><sp
 			If this results in network errors
 			such that there is no valid fallback image,
 			the effect is as if
-			the value <a class=css-code data-link-for=shape-outside data-link-type=value href=#valuedef-auto title=auto>auto</a>
+			the value <a class=css-code data-link-for=shape-outside data-link-type=value href=#valuedef-none title=none>none</a>
 			had been specified.
 		</dd>
 	</dl>
@@ -972,8 +976,9 @@ <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>change auto to none for shape-outside</li>
 		<li>Defined shape-box instead of redefining box</li>
-		<li>Clarify that shape from image may produce more than one path</li>
+		<li>Clarified that shape from image may produce more than one path</li>
 	</ul>
 
 <h3 class="no-num heading settled heading" id=20130620><span class=content>
@@ -1159,7 +1164,6 @@ <h3 class="no-num no-ref heading settled heading" id=informative><span class=con
 <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>
 <div data-fill-with=index><ul class=indexlist>
-<li>auto, <a href=#valuedef-auto title="section 6.1">6.1</a>
 <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>
@@ -1175,6 +1179,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>inset(), <a href=#funcdef-inset title="section 3.1">3.1</a>
 <li>&lt;length&gt;, <a href=#valuedef-length title="section 6.3">6.3</a>
 <li>margin-box, <a href=#margin-box title="section 5">5</a>
+<li>none, <a href=#valuedef-none title="section 6.1">6.1</a>
 <li>&lt;number&gt;, <a href=#valuedef-number title="section 6.2">6.2</a>
 <li>padding-box, <a href=#padding-box title="section 5">5</a>
 <li>&lt;percentage&gt;, <a href=#valuedef-percentage title="section 6.3">6.3</a>
@@ -1192,7 +1197,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;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-outside</a><td>none | [ &lt;basic-shape&gt; || &lt;shape-box&gt; ] | &lt;image&gt;<td>none<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

@@ -105,7 +105,11 @@ <h3 id="terminology">
 	to determine where content flows.
 	By default,
 	the <a>float area</a> is the float element's
-	<a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
+	<a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a> 
+	(note this can be different than 
+	the <a>float area</a> produced 
+	by the ''margin-box'' value, 
+	which includes border-radius curvature).
 	This specification's 'shape-outside' property
 	can be used to define an arbitrary,
 	non-rectangular <a>float area</a>.
@@ -523,7 +527,7 @@ <h2 id="shapes-from-image">
 	The image is sized and positioned 
 	as if it were a replaced element 
 	with a specified width and height 
-	of the element's used content-box size.
+	of the element's used content box size.
 
 	For animated raster image formats (such as
 	<a href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a>),
@@ -585,10 +589,10 @@ <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 <<shape-box>> value extends the <<box>> value to include margin-box. Its syntax is:
+	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
+		<dfn><<shape-box>></dfn> = <<box>> | ''margin-box''
 	</pre>
 
 	The definitions of the values are:
@@ -622,10 +626,10 @@ <h2 id="shapes-from-box-values">
 		the box values define these shapes:
 
 		<ul>
-			<li>margin-box: the shape containing all of the yellow pixels</li>
-			<li>border-box: the shape containing all of the black pixels</li>
-			<li>padding-box: the shape containing all of the mauve pixels</li>
-			<li>content-box: the shape containing all of the blue pixels</li>
+			<li>''margin-box'': the shape containing all of the yellow pixels</li>
+			<li>''border-box'': the shape containing all of the black pixels</li>
+			<li>''padding-box'': the shape containing all of the mauve pixels</li>
+			<li>''content-box'': the shape containing all of the blue pixels</li>
 		</ul>
 
 		<div class="figure">
@@ -669,8 +673,8 @@ <h3 id="shape-outside-property">
 
 	<pre class='propdef'>
 		Name: shape-outside
-		Value: auto | [ <<basic-shape>> || <<shape-box>> ] | <<image>>
-		Initial: auto
+		Value: none | [ <<basic-shape>> || <<shape-box>> ] | <<image>>
+		Initial: none
 		Applies To: floats
 		Inherited: no
 		Computed Value: computed lengths for <<basic-shape>>, the <<image>> with its URI made absolute, otherwise as specified
@@ -681,9 +685,9 @@ <h3 id="shape-outside-property">
 		The values of this property have the following meanings:
 
 	<dl dfn-type="value" dfn-for="shape-outside">
-		<dt><dfn>auto</dfn></dt>
+		<dt><dfn>none</dfn></dt>
 		<dd>
-			The <a>float area</a> uses the margin box as normal.
+			The <a>float area</a> is unaffected.
 		</dd>
 
 		<dt><<shape-box>></dt>
@@ -727,7 +731,7 @@ <h3 id="shape-outside-property">
 			If this results in network errors
 			such that there is no valid fallback image,
 			the effect is as if
-			the value <a value for="shape-outside">auto</a>
+			the value <a value for="shape-outside">none</a>
 			had been specified.
 		</dd>
 	</dl>
@@ -894,8 +898,9 @@ <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>change auto to none for shape-outside</li>
 		<li>Defined shape-box instead of redefining box</li>
-		<li>Clarify that shape from image may produce more than one path</li>
+		<li>Clarified that shape from image may produce more than one path</li>
 	</ul>
 
 <h3 class="no-num" id="20130620">