[css-images-4] Fix basic syntax of gradients (#8367)

Fixes #7986

Author: cdoublev

css-images-4/Overview.bs

@@ -18,7 +18,7 @@ Abstract: This module contains the features of CSS level 4 relating to the <<ima
 
 Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/27
 Previous Version: https://www.w3.org/TR/2017/WD-css-images-4-20170413/
-Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, <ending-shape>, Map, <image>, invalid image, invalid images, concrete object size, linear-gradient(), radial-gradient(), default object size, CSS
+Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, Map, <image>, invalid image, invalid images, concrete object size, linear-gradient(), radial-gradient(), default object size, CSS
 Ignored Vars: H, P
 Include Can I Use Panels: yes
 Default Highlight: css
@@ -1198,7 +1198,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 
 	<pre class=prod>
 		<dfn>linear-gradient()</dfn> = linear-gradient(
-			[ <<angle>> | to <<side-or-corner>> ]? || <<color-interpolation-method>>,
+			[ [ <<angle>> | to <<side-or-corner>> ] || <<color-interpolation-method>> ]? ,
 			<<color-stop-list>>
 		)
 		<dfn>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]
@@ -1344,7 +1344,7 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 
 	<pre class=prod>
 		<dfn>radial-gradient()</dfn> = radial-gradient(
-		  [[ <<ending-shape>> || <<size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>,
+		  [ [ [ <<rg-ending-shape>> || <<rg-size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>]? ,
 		  <<color-stop-list>>
 		)
 	</pre>
@@ -1423,7 +1423,7 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 
 	<pre class='prod'>
 		<dfn>conic-gradient()</dfn> = conic-gradient(
-			[ [ from <<angle>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>,
+			[ [ [ from <<angle>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>> ]? ,
 			<<angular-color-stop-list>>
 		)
 	</pre>
@@ -2389,7 +2389,7 @@ Interpolating <<gradient>> {#interpolating-gradients}
 
 			* Otherwise, the size must be changed to a pair of <<length>>s
 				that would produce an equivalent ending-shape.
-				If the <<ending-shape>> was specified as <a value spec=css-images-3>circle</a>,
+				If the <<rg-ending-shape>> was specified as <a value spec=css-images-3>circle</a>,
 				change it to ''ellipse''.
 
 	2. Interpolate each component and color-stop of the gradients independently.