[css-backgrounds-3][css-backgrounds-4] Use bracketed range notation

Added bracketed range notation for non-negative values ( [0,∞] )
in these properties & productions:

- <bg-size>
- <line-width>
- border-radius and longhands
- border-image-slice
- border-image-width
- border-image-outset
- <shadow>
  NOTE: required re-writing the syntax
  (since ony one of the 4 possible lengths has a restriction)
- border-limit and border-clip in level 4
  NOTE: these didn't have prose restrictions,
  but they also didn't explain how negative values could work.

I added a changes note to level 3 (change since CR),
but not level 4 (not published yet).

Author: AmeliaBR

css-backgrounds-3/Overview.bs

@@ -930,7 +930,7 @@ layer.
 
 <p>Specifies the size of the background images. Where
 
-<pre class=prod><dfn><<bg-size>></dfn> = [ <<length-percentage>> | auto ]{1,2} | cover | contain</pre>
+<pre class=prod><dfn><<bg-size>></dfn> = [ <<length-percentage [0,&infin;]>> | auto ]{1,2} | cover | contain</pre>
 
 <p>Values have the following meanings:
 
@@ -946,7 +946,7 @@ layer.
     (if any), to the smallest size such that both its width and its
     height can completely cover the background positioning area.</dd>
 
-  <dt>[ <dfn><<length-percentage>></dfn>
+  <dt>[ <dfn><<length-percentage [0,&infin;]>></dfn>
   | <dfn>auto</dfn> ]{1,2}</dt>
   <dd>
     <p>The first value gives the width of the corresponding image,
@@ -1631,7 +1631,7 @@ the padding is less than the radius of the corner.
 <p>These properties set the thickness of the border.
 Where
 
-<pre class=prod><dfn><<line-width>></dfn> = <<length>> | thin | medium | thick</pre>
+<pre class=prod><dfn><<line-width>></dfn> = <<length [0,&infin;]>> | thin | medium | thick</pre>
 
 <p dfn-type=value dfn-for="<line-width>, border-width, border-top-width, border-left-width, border-bottom-width, border-right-width, border">
 The lengths corresponding to <dfn>thin</dfn>, <dfn>medium</dfn>, and <dfn>thick</dfn>
@@ -1791,7 +1791,7 @@ the 'color' property. The fact that the
         <dfn>border-bottom-left-radius</dfn>
     <tr>
     <th><a href="#values">Value</a>:
-    <td><<length-percentage>>{1,2}
+    <td><<length-percentage [0,&infin;]>>{1,2}
   <tr>
     <th>Initial:
     <td>0
@@ -1819,7 +1819,7 @@ the 'color' property. The fact that the
     <td><dfn>border-radius</dfn>
   <tr>
     <th><a href="#values">Value</a>:
-    <td><<length-percentage>>{1,4} [ / <<length-percentage>>{1,4} ]?
+    <td><<length-percentage [0,&infin;]>>{1,4} [ / <<length-percentage [0,&infin;]>>{1,4} ]?
   <tr>
     <th>Initial:
     <td>see individual properties
@@ -2231,7 +2231,7 @@ and the border image is drawn as described in the sections below.
     <td><dfn>border-image-slice</dfn>
   <tr>
     <th><a href="#values">Value</a>:
-    <td>[<<number>> | <<percentage>>]{1,4} &amp;&amp; fill?
+    <td>[<<number [0,&infin;]>> | <<percentage [0,&infin;]>>]{1,4} &amp;&amp; fill?
   <tr>
     <th>Initial:
     <td>100%
@@ -2266,12 +2266,12 @@ the same as the right; if the bottom is missing, it is the same as the top;
 if the right is missing, it is the same as the top.
 
 <dl dfn-for=border-image-slice dfn-type=value>
-  <dt><dfn><<percentage>></dfn>
+  <dt><dfn><<percentage [0,&infin;]>></dfn>
   <dd>Percentages are relative to the size of the image: the width
     of the image for the horizontal offsets, the height for vertical
     offsets.
 
-  <dt><dfn><<number>></dfn>
+  <dt><dfn><<number [0,&infin;]>></dfn>
   <dd>Numbers represent pixels in the image (if the image is a raster
     image) or vector coordinates (if the image is a vector image).
 
@@ -2312,7 +2312,7 @@ with no <i>specified size</i> and the <i>border image area</i> as the <i>default
     <td><dfn>border-image-width</dfn>
   <tr>
     <th><a href="#values">Value</a>:
-    <td>[ <<length-percentage>> | <<number>> | auto ]{1,4}
+    <td>[ <<length-percentage [0,&infin;]>> | <<number [0,&infin;]>> | auto ]{1,4}
   <tr>
     <th>Initial:
     <td>1
@@ -2346,11 +2346,11 @@ if the bottom is missing, it is the same as the top; if the right is missing,
 it is the same as the top. Values have the following meanings:</p>
 
 <dl dfn-for=border-image-width dfn-type=value>
-  <dt><dfn><<length-percentage>></dfn>
+  <dt><dfn><<length-percentage [0,&infin;]>></dfn>
   <dd>Percentages refer to the size of the border image area: the width of the
     area for horizontal offsets, the height for vertical offsets.
 
-  <dt><dfn><<number>></dfn>
+  <dt><dfn><<number [0,&infin;]>></dfn>
   <dd>Numbers represent multiples of the corresponding computed
     <a href="#the-border-width">border-width</a>.
 
@@ -2385,7 +2385,7 @@ them by <var>f</var>.
     <td><dfn>border-image-outset</dfn>
   <tr>
     <th><a href="#values">Value</a>:
-    <td>[ <<length>> | <<number>> ]{1,4}
+    <td>[ <<length [0,&infin;]>> | <<number [0,&infin;]>> ]{1,4}
   <tr>
     <th>Initial:
     <td>0
@@ -2415,11 +2415,11 @@ if the bottom is missing, it is the same as the top; if the right is missing,
 it is the same as the top.
 
 <dl dfn-for=border-image-outset dfn-type=value>
-  <dt><<length>>
+  <dt><<length [0,&infin;]>>
   <dd>Represents an outset of the specified length.
   Negative values are invalid.
 
-  <dt><<number>>
+  <dt><<number [0,&infin;]>>
   <dd>Represents an outset of the specified multiple of the corresponding computed <a href="#the-border-width">border-width</a>.
   Negative values are invalid.
 </dl>
@@ -2668,7 +2668,7 @@ has been moved to the <a href="https://www.w3.org/TR/css3-break/">CSS Fragmentat
   represented by 2-4 length values, an optional color, and an optional ''box-shadow/inset'' keyword.
   Omitted lengths are 0; omitted colors default to the value of the 'color' property.
   <pre class=prod>
-  <dfn><<shadow>></dfn> = <<color>>? &amp;&amp; <<length>>{2,4} &amp;&amp; inset?</pre>
+  <dfn><<shadow>></dfn> = <<color>>? &amp;&amp; [<<length>>{2} <<length [0,&infin;]>>? <<length>>?] &amp;&amp; inset?</pre>
 
   <p>The components of each <<shadow>> are interpreted as follows:
 
@@ -2684,7 +2684,7 @@ has been moved to the <a href="https://www.w3.org/TR/css3-break/">CSS Fragmentat
       Specifies the <dfn>vertical offset</dfn> of the shadow.
       A positive value offsets the shadow down, a negative one up.
 
-    <dt><dfn id="shadow-blur-radius">3rd <<length>></dfn>
+    <dt><dfn id="shadow-blur-radius">3rd <<length [0,&infin;]>></dfn>
     <dd>Specifies the <dfn>blur radius</dfn>.
       Negative values are not allowed.
       If the blur value is zero, the shadow’s edge is sharp.
@@ -2993,6 +2993,9 @@ Changes since the 17 October 2017 Candidate Recommendation</h3>
   <li>
     Cleaned up and regularized “Animation type” and “Computed value” lines
     in the property definition tables.
+  <li>
+    Changed syntax to use <a>bracketed range notation</a>
+    to reflect the prose restrictions on negative values.
 </ul>
 
 <h3 id="changes-2014-09">

css-backgrounds-4/Overview.bs

@@ -236,7 +236,7 @@ Corner Sizing: the 'border-radius property</h3>
 
 	<pre class="propdef">
 		Name: border-radius
-		Value: <<length-percentage>>{1,4} [ / <<length-percentage>>{1,4} ]?
+		Value: <<length-percentage [0,&infin;]>>{1,4} [ / <<length-percentage [0,&infin;]>>{1,4} ]?
 		Initial: 0
 		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
 		Inherited: no
@@ -338,8 +338,8 @@ Partial Borders: the 'border-limit' property</h3>
 
 	<pre class="propdef">
   	Name: border-limit
-  	Value: all | [ sides | corners ] <<length-percentage>>?
-  				| [ top | right | bottom | left ] <<length-percentage>>
+  	Value: all | [ sides | corners ] <<length-percentage [0,&infin;]>>?
+  				| [ top | right | bottom | left ] <<length-percentage [0,&infin;]>>
   	Initial: round
   	Applies to: all elements, except table element when 'border-collapse' is ''collapse''
   	Inherited: no
@@ -394,7 +394,7 @@ The 'border-clip' properties</h3>
 
 		<pre class="propdef">
   		Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
-  		Value: normal | [ <<length-percentage>> | <<flex>> ]+
+  		Value: normal | [ <<length-percentage [0,&infin;]>> | <<flex>> ]+
   		Initial: normal
   		Inherited: no
   		Percentages: refer to length of border-edge side