Incorporated fantasai's comments on stripes() and `<1d-image>

Author: SebastianZ

css-backgrounds-4/Overview.bs

@@ -202,20 +202,12 @@ Painting Area: the 'background-clip' property</h3>
 	These properties set the foreground color of the border specified
 	by the 'border-style' properties.
 
-	The stripes defined by <<1d-image>> follow the direction of
-	the side the border is applied on (i.e. horizontally on left and
-	right borders and vertically on top and bottom borders), starting outwards.
+	The stripes defined by <<1d-image>> follow the shape of the border
+	on the side to which they apply,
+	and are drawn in bands starting from the [=padding edge=] and progressing outwards.
 	With that, the corresponding 'border-*-width' property defines the total
 	width of the stripes.
 
-	The stripes are painted above a given <<color>>. This allows the <<color>>
-	value to serve as a fallback, so any transparent stripes let the color
-	shine through.
-
-	When interpolating between borders with the same number of colors,
-	interpolation is performed individually per color band as <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>.
-	Interpolation between borders with different numbers of colors is discrete.
-
 	'border-color' is a shorthand for the four 'border-*-color' properties.
 	The four values set the top, right, bottom and left border, respectively.
 	A missing left is the same as right,
@@ -229,10 +221,7 @@ Painting Area: the 'background-clip' property</h3>
 		<pre class=lang-css>
 		.foo {
 			border: 30px solid;
-			border-top-color: stripes(skyblue, black);
-			border-right-color: stripes(orange, yellow);
-			border-bottom-color: stripes(yellowgreen, black);
-			border-left-color: stripes(indianred, yellow);
+			border-color: stripes(skyblue, black) stripes(orange, yellow) stripes(yellowgreen, black) stripes(indianred, yellow);
 		}
 		</pre>
 

css-images-4/Overview.bs

@@ -1923,7 +1923,8 @@ Color Stop “Fixup”</h4>
 
 	<pre class=prod>
 		<dfn>&lt;1d-image></dfn> = <<stripes()>>
-		<dfn>stripes()</dfn> = stripes( [ <<color>> && [ <<length-percentage>> | <<flex>>]? ]# )
+		<dfn>stripes()</dfn> = stripes( <<color-stripe>># )
+		<dfn>&lt;color-stripe></dfn> = <<color>> && [ <<length-percentage>> | <<flex>> ]?
 	</pre>
 
 	The ''stripes()'' function defines a 1d-image
@@ -1969,19 +1970,18 @@ Color Stop “Fixup”</h4>
 		and ensures smoothly continuous behavior
 		as the <<flex>> values approach zero.)
 	</div>
-		
-	
+
 	The |painting area| is defined by the context in which the ''stripes()'' function is used.
 	If used generically as an <<image>>,
 	the |painting area| is the height of the [=concrete image size=].
-	
+
 	If the sum thickness of the stripes is smaller than the |painting area|,
 	the [=paint line=] is [=transparent black=] for its remaining length,
 	as if a final ''transparent'' argument were given.
 	If the sum thickness is larger,
 	any stripes or portions thereof that would be past the end of the [=paint line=] have no effect.
 
-	The computed value of this function is the [=specified value=] 
+	The computed value of this function is the [=specified value=]
 	with all <<color>>s computed
 	and all <<length-percentage>>s absolutized and computed to the extent possible.
 
@@ -2471,6 +2471,39 @@ Interpolating <<gradient>> {#interpolating-gradients}
 		Then, for each pair of color-stops,
 		interpolate the position and color independently.
 
+Interpolating <<1d-image>> {#interpolating-1d-images}
+-----------------------------------------------
+
+	Similar to <a lt="interpolating-gradients">gradient images</a>,
+	one-dimensional images can be interpolated directly in CSS transitions and animations,
+	smoothly animating from one image to another.
+	There are only a few restrictions on what images are allowed to be interpolated:
+
+	1. Both the starting and ending image must have the same number of <<color-stripe>>s.
+
+	2. Neither image uses a combination of <<length>>, <<percentage>>, and <<flex>> stripes.
+
+	If the two image satisfy both constraints,
+	they must be interpolated as described below.
+	If they fail the second one only,
+	they must be abruptly transitioned at 50%
+	(unless otherwise specified by a future specification).
+	If they fail the first constraint,
+	they must be interpolated using ''cross-fade()''
+	as for generic images.
+
+	Note: The abrupt transition at 50% is so that content will not rely on cross-fading,
+	and smarter interpolation rules can be added for this case in the future.
+
+	1. Interpolate each component and stripe of the images independently.
+
+	2. To interpolate a stripe,
+		first match each stripe in the start image
+		to the corresponding stripe at the same index in the end image.
+		Then, for each pair of stripes,
+		interpolate the <a href="https://www.w3.org/TR/css3-transitions/#animtype-length">thickness</a>
+		and <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a> independently.
+
 <!--
  ██████  ████████ ████████  ████    ███    ██       ████ ████████    ███    ████████ ████  ███████  ██    ██
 ██    ██ ██       ██     ██  ██    ██ ██   ██        ██       ██    ██ ██      ██     ██  ██     ██ ███   ██

css-ui-4/Overview.bs

@@ -294,7 +294,7 @@ Inherited: no
 Percentages: N/A
 Computed value: The computed value for ''outline-color/invert'' is ''outline-color/invert''.
  For <<color>> values, see [[!CSS-COLOR-4#resolving-color-values]] in [[!CSS-COLOR-4]].
- <<1d-image>> values are computed as defined in their definition.
+ For <<1d-image>> values, see [[!CSS-IMAGES-4#stripes]] in [[!CSS-IMAGES-4]].
 Animation type: by computed value
 </pre>
 
@@ -753,7 +753,7 @@ Values have the following meanings:
 
 				Note: This specification does not define
 				how the coordinate systems of the various types of <<image>> are established,
-				and defers these definitions to [[CSS4-IMAGES]].
+				and defers these definitions to [[CSS-IMAGES-4]].
 
 				If the values are unspecified,
 				then the natural hotspot defined inside the image resource itself is used.