Rephrased stripes() and added it to <image>

Author: SebastianZ

css-images-4/Overview.bs

@@ -72,7 +72,7 @@ Value Definitions {#values}
 	or <a section href="#gradients">gradient notation</a>.
 	Its syntax is:
 
-	<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<image()>> | <<image-set()>> | <<cross-fade()>> | <<element()>> | <<gradient>></pre>
+	<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<image()>> | <<image-set()>> | <<cross-fade()>> | <<element()>> | <<gradient>> | <<stripes()>></pre>
 
 	An <<image>> can be used in many CSS properties,
 	including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS2]]
@@ -1116,47 +1116,6 @@ Cycle Detection</h4>
 	If the graph contains a cycle,
 	any ''element()'' functions participating in the cycle are <a>invalid images</a>.
 
-
-<!--
- ██████  ████████ ████████  ████ ████████  ███████  ██████    ███ ███
-██    ██    ██    ██     ██  ██  ██     ██ █       ██    ██  ██     ██
-██          ██    ██     ██  ██  ██     ██ █       ██       ██       ██
- ██████     ██    ████████   ██  ████████  █████    ██████  ██       ██
-      ██    ██    ██   ██    ██  ██        █             ██ ██       ██
-██    ██    ██    ██    ██   ██  ██        █       ██    ██  ██     ██
- ██████     ██    ██     ██ ████ ██        ███████  ██████    ███ ███
--->
-
-Stripes: the ''stripes()'' notation {#stripes-function}
-----------------------------------------------------------------------
-
-	The ''stripes()'' function allows to define a number of stripes of
-	different colors with different widths. How those stripes are actually
-	painted depends on the context the function is used in.
-
-	The syntax for ''stripes()'' is defined as:
-
-	<pre class=prod>
-		<dfn>stripes()</dfn> = stripes( [ <<color>> && [ <<length-percentage>> | <<flex>>]? ]# )
-	</pre>
-
-	The function represents a 1-dimensional image generated by a list
-	of colors and an optional thickness for each of them.
-
-	A <<percentage>> or <<flex>> value refers to the total length of the image
-	in the used context.
-	The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
-	any other value is invalid.
-
-	If the thickness of a stripe is omitted, it is meant to be ''1fr''.
-
-	If the width of the context the function is used in exceeds the total
-	thickness of the stripes, the rest is painted transparent. I.e. it behaves
-	as if there were an additional last ''transparent'' stripe.
-	If the width of the context the function is used in is smaller than the
-	total thickness of the stripes, the stripes are clipped starting from the
-	last defined color.
-
 <!--
  ██████   ████████     ███    ████████  ████ ████████ ██    ██ ████████  ██████
 ██    ██  ██     ██   ██ ██   ██     ██  ██  ██       ███   ██    ██    ██    ██
@@ -1935,15 +1894,45 @@ Color Stop “Fixup”</h4>
 		</pre>
 	</div>
 
-
-
+<!--
+ ██████  ████████ ████████  ████ ████████  ███████  ██████    ███ ███
+██    ██    ██    ██     ██  ██  ██     ██ █       ██    ██  ██     ██
+██          ██    ██     ██  ██  ██     ██ █       ██       ██       ██
+ ██████     ██    ████████   ██  ████████  █████    ██████  ██       ██
+      ██    ██    ██   ██    ██  ██        █             ██ ██       ██
+██    ██    ██    ██    ██   ██  ██        █       ██    ██  ██     ██
+ ██████     ██    ██     ██ ████ ██        ███████  ██████    ███ ███
+-->
 
 1D Image Values: the ''stripes()'' notation {#stripes}
 ======================================================
 
-	Issue: <a href="https://github.com/w3c/csswg-drafts/issues/2532">Per WG resolution</a>,
-	define the ''stripes()'' function
-	which creates a 1D image for use in borders/outlines.
+	The ''stripes()'' function allows to define a number of stripes of
+	different colors with different widths.
+
+	The syntax for ''stripes()'' is defined as:
+
+	<pre class=prod>
+		<dfn>stripes()</dfn> = stripes( [ <<color>> && [ <<length-percentage>> | <<flex>>]? ]# )
+	</pre>
+
+	The function represents a 1-dimensional image generated by a list of colors
+	and an optional thickness for each of them.
+
+	A <<percentage>> or <<flex>> value refers to the total length of the image
+	in the used context.
+	The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
+	any other value is invalid.
+
+	If the thickness of a stripe is omitted, it is interpreted as ''1fr''.
+
+	If not defined differently by the context the function is used in, the
+	stripes are painted from top to bottom and tiled horizontally. If the size
+	of the painting area exceeds the total thickness of the stripes, the
+	remaining area is painted transparently. I.e. it behaves as if there was an
+	additional last ''transparent'' stripe. If the size of the painting area
+	is smaller than the total thickness of the stripes, the stripes are clipped
+	starting from the last defined color.
 
 <!--
  ██████  ████ ████████ ████ ██    ██  ██████