[css-images] Add basic syntax of repeating gradient types (#8775)

cdoublev · web-flow · commit 5e9a938fb282 · 2023-04-27T13:15:49.000-07:00
diff --git a/css-images-3/Overview.bs b/css-images-3/Overview.bs
@@ -331,10 +331,10 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 	Its syntax is as follows:
 
 	<pre class=prod>
-		<<linear-gradient()>> = linear-gradient(
-			[ <<angle>> | to <<side-or-corner>> ]? ,
-			<<color-stop-list>>
-		)
+		<<linear-gradient()>> = linear-gradient( [ <<linear-gradient-syntax>> ] )
+
+		<dfn>&lt;linear-gradient-syntax></dfn> = [ <<angle>> | to <<side-or-corner>> ]? , <<color-stop-list>>
+
 		<dfn>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]
 	</pre>
 
@@ -506,10 +506,11 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 	The radial gradient syntax is:
 
 	<pre class=prod>
-		<<radial-gradient()>> = radial-gradient(
-		  [ <<rg-ending-shape>> || <<rg-size>> ]? [ at <<position>> ]? ,
-		  <<color-stop-list>>
-		)
+		<<radial-gradient()>> = radial-gradient( [ <radial-gradient-syntax> ] )
+
+		<dfn>&lt;radial-gradient-syntax></dfn> =
+			<<rg-ending-shape>> || <<rg-size>> ]? [ at <<position>> ]? ,
+			<<color-stop-list>>
 
 		<dfn>&lt;rg-size></dfn> = <<rg-extent-keyword>> | <<length [0,∞]>> | <<length-percentage [0,∞]>>{2}
 
@@ -770,6 +771,11 @@ Repeating Gradients: the ''repeating-linear-gradient()'' and ''repeating-radial-
 	and are interpreted the same
 	as their respective non-repeating siblings defined previously.
 
+	<pre class=prod>
+		<dfn>&lt;repeating-linear-gradient()></dfn> = repeating-linear-gradient( [ <<linear-gradient-syntax>> ] )
+		<dfn>&lt;repeating-radial-gradient()></dfn> = repeating-radial-gradient( [ <<radial-gradient-syntax>> ] )
+	</pre>
+
 	When rendered, however, the color-stops are repeated infinitely in both directions,
 	with their positions shifted by multiples of the difference between
 	the last specified color-stop's position
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
@@ -1197,10 +1197,9 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 	See [[css-color-4#interpolation]].
 
 	<pre class=prod>
-		<dfn>linear-gradient()</dfn> = linear-gradient(
+		<dfn>&lt;linear-gradient-syntax></dfn> =
 			[ [ <<angle>> | to <<side-or-corner>> ] || <<color-interpolation-method>> ]? ,
 			<<color-stop-list>>
-		)
 		<dfn>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]
 	</pre>
 
@@ -1343,10 +1342,9 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 	See [[css-color-4#interpolation]].
 
 	<pre class=prod>
-		<dfn>radial-gradient()</dfn> = radial-gradient(
-		  [ [ [ <<rg-ending-shape>> || <<rg-size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>]? ,
-		  <<color-stop-list>>
-		)
+		<dfn>&lt;radial-gradient-syntax></dfn> =
+			[ [ [ <<rg-ending-shape>> || <<rg-size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>]? ,
+		  	<<color-stop-list>>
 	</pre>
 
 <div class="example">
@@ -1422,10 +1420,10 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 	The syntax for a conic gradient is:
 
 	<pre class='prod'>
-		<dfn>conic-gradient()</dfn> = conic-gradient(
+		<dfn>conic-gradient()</dfn> = conic-gradient( [ <<conic-gradient-syntax>> ] )
+		<dfn>&lt;conic-gradient-syntax></dfn> =
 			[ [ [ from <<angle>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>> ]? ,
 			<<angular-color-stop-list>>
-		)
 	</pre>
 
 	The arguments are defined as follows:
@@ -1583,6 +1581,12 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 	and are interpreted the same
 	as their respective non-repeating siblings defined previously.
 
+	<pre class=prod>
+		<dfn>&lt;repeating-conic-gradient()></dfn> = repeating-conic-gradient( [ <<conic-gradient-syntax>> ] )
+		<dfn>&lt;repeating-linear-gradient()></dfn> = repeating-linear-gradient( [ <<linear-gradient-syntax>> ] )
+		<dfn>&lt;repeating-radial-gradient()></dfn> = repeating-radial-gradient( [ <<radial-gradient-syntax>> ] )
+	</pre>
+
 	<div class=example>
 		Basic repeating conic gradient:
 
