From 99ff48af83e80b08e3a4888d4118cbfede0169fb Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 9 Feb 2022 23:28:39 +0100
Subject: [PATCH 01/13] Added stripes() function to CSS Images 4

---
 css-images-4/Overview.bs | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 5b3d12f7998..392ce3d665b 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1117,7 +1117,45 @@ Cycle Detection</h4>
 	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.
 
 <!--
  ██████   ████████     ███    ████████  ████ ████████ ██    ██ ████████  ██████

From 72ff857fbf46b15eab8b8aa2a147cad0540c1a23 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 9 Feb 2022 23:29:30 +0100
Subject: [PATCH 02/13] Replaced colors list in border-*-color by stripes()
 function

---
 css-backgrounds-4/Overview.bs | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 3ac58c93d78..e016bee0912 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -185,7 +185,7 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class=propdef>
 	Name: border-top-color, border-right-color, border-bottom-color, border-left-color
-	Value: <<color>>#
+	Value: <<color>> || <<stripes()>>
 	Initial: currentcolor
 	Applies to: all elements
 	Inherited: no
@@ -196,15 +196,21 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class="propdef shorthand">
 	Name: border-color
-	Value: <<color>>#{1,4}
+	Value: [ <<color>> || <<stripes()>> ]{1,4}
 	</pre>
 
 	These properties set the foreground color of the border specified
 	by the 'border-style' properties.
-	If a list of values is provided, the border is split into equal width bands of each color
-	along the direction of the side the border is applied on
-	(i.e. split horizontally on left and right borders and vertically on top and bottom borders),
-	starting outwards.
+
+	The stripes defined by the <<stripes()>> function 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.
+	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>.
@@ -223,7 +229,10 @@ Painting Area: the 'background-clip' property</h3>
 		<pre class=lang-css>
 		.foo {
 			border: 30px solid;
-			border-color: skyblue orange yellowgreen indianred, black yellow;
+			border-top-color: stripes(skyblue, black);
+			border-right-color: stripes(orange, yellow);
+			border-bottom-color: stripes(yellowgreen, black);
+			border-left-color: stripes(indianred, yellow);
 		}
 		</pre>
 

From e9b96b7c6c604ac9dd09f6c4111531d1de2d992d Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 16 Mar 2022 10:40:48 +0100
Subject: [PATCH 03/13] Rephrased stripes() and added it to <image>

---
 css-images-4/Overview.bs | 83 +++++++++++++++++-----------------------
 1 file changed, 36 insertions(+), 47 deletions(-)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 392ce3d665b..6a6a3e398e6 100644
--- a/css-images-4/Overview.bs
+++ b/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.
 
 <!--
  ██████  ████ ████████ ████ ██    ██  ██████

From aa6ccce4680dc3e47ad3dea5aeea1a1bfd88f9fa Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 16 Mar 2022 11:04:03 +0100
Subject: [PATCH 04/13] Added information about how to compute stripes()

---
 css-images-4/Overview.bs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 6a6a3e398e6..207e7c71b64 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1934,6 +1934,9 @@ Color Stop “Fixup”</h4>
 	is smaller than the total thickness of the stripes, the stripes are clipped
 	starting from the last defined color.
 
+	The computed value of this function is the [=specified value=] with all
+	<<color>>s computed '1fr' values removed.
+
 <!--
  ██████  ████ ████████ ████ ██    ██  ██████
 ██    ██  ██       ██   ██  ███   ██ ██    ██

From 5423bc79fc198e73dd682f75110a702755d6be1e Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 16 Mar 2022 11:41:57 +0100
Subject: [PATCH 05/13] Added stripes() to outline-color and added computed
 value information for it

---
 css-backgrounds-4/Overview.bs | 2 +-
 css-ui-4/Overview.bs          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index e016bee0912..8d7605e18af 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -190,7 +190,7 @@ Painting Area: the 'background-clip' property</h3>
 	Applies to: all elements
 	Inherited: no
 	Percentages: n/a
-	Computed Value: the computed color
+	Computed Value: the computed color and/or <<stripes()>> function
 	Animation type: see prose
 	</pre>
 
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 31380b99146..46fabbdf763 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -287,13 +287,14 @@ Animation type: by computed value
 
 <pre class="propdef">
 Name: outline-color
-Value: <<color>> | invert
+Value: [ <<color>> || <<stripes()>> ] | invert
 Initial: invert
 Applies to: all elements
 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]].
+ <<stripes()>> values are computed as defined in their definition.
 Animation type: by computed value
 </pre>
 

From 6f450abdfc86f79dcacaf5bc73fa1fa5369391ed Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Thu, 17 Mar 2022 01:36:20 +0100
Subject: [PATCH 06/13] Added stripes() function to Changes sections

---
 css-backgrounds-4/Overview.bs | 1 +
 css-images-4/Overview.bs      | 2 +-
 css-ui-4/Overview.bs          | 5 ++++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 8d7605e18af..e86602f1130 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -711,6 +711,7 @@ Additions Since Level 3</h3>
 		<li>logical 'background-position' values (''background-position/start'', ''background-position/end'')
 		<li>the ''extend'' keyword of 'background-repeat'
 		<li>'corner-shape'
+		<li><<stripes()>> as value for ''border-color'' and its longhands
 		<li>multiple border colors per border
 		<li>logical border properties
 		<li><a href="#partial-borders">Partial Borders</a> (make part of border shorthand as well!)
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 207e7c71b64..9e98c67f168 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -2501,7 +2501,7 @@ Changes {#changes}
 - Switched color-stop grammar to repeat at end for readability
 - Clarified that object-fit and image-resolution use discrete animation
 - Fixed definition of cross-fade() image blending
-- Added placeholder section for the stripes() function
+- Added stripes() function and added it to &lt;image> data type
 - Moved interpolation of images from [[css3-images]]
 - Clarifed that cross-fade() takes 1+ arguments. Defined sizing and painting of the new function arguments in detail.
 - Moved cross-fade() from [[css3-images]]
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 46fabbdf763..446b44e2cb2 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -2542,12 +2542,15 @@ the following normative changes have been made:
 
 <ul>
 	<li>
-		Introduce a definition for the 'pointer-events' property.
+		Introduced a definition for the 'pointer-events' property.
 
 	<li>
 		Extend the image types required to be supported for the 'cursor' property
 		from just <<url>> to <<url>> and <<url-set>>.
 		(Support for the broader <<image>> type remains allowed but optional.)
+
+	<li>
+		Added <<stripes()>> as value for the 'outline-color' property.
 </ul>
 
 <h3 id=changes-24-1-2020 class=no-num>Changes from the

From f5569658569ccb3198f45440a7042f8b66710aec Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 20 Apr 2022 13:13:20 +0200
Subject: [PATCH 07/13] Put stripes() definition behind a <1d-image> type to
 make it easily extensible

---
 css-backgrounds-4/Overview.bs | 10 +++++-----
 css-images-4/Overview.bs      |  7 ++++---
 css-ui-4/Overview.bs          |  6 +++---
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index e86602f1130..a67bde4bfe0 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -185,24 +185,24 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class=propdef>
 	Name: border-top-color, border-right-color, border-bottom-color, border-left-color
-	Value: <<color>> || <<stripes()>>
+	Value: <<color>> || <<1d-image>>
 	Initial: currentcolor
 	Applies to: all elements
 	Inherited: no
 	Percentages: n/a
-	Computed Value: the computed color and/or <<stripes()>> function
+	Computed Value: the computed color and/or a one-dimensional image function
 	Animation type: see prose
 	</pre>
 
 	<pre class="propdef shorthand">
 	Name: border-color
-	Value: [ <<color>> || <<stripes()>> ]{1,4}
+	Value: [ <<color>> || <<1d-image>> ]{1,4}
 	</pre>
 
 	These properties set the foreground color of the border specified
 	by the 'border-style' properties.
 
-	The stripes defined by the <<stripes()>> function follow the direction of
+	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.
 	With that, the corresponding 'border-*-width' property defines the total
@@ -711,7 +711,7 @@ Additions Since Level 3</h3>
 		<li>logical 'background-position' values (''background-position/start'', ''background-position/end'')
 		<li>the ''extend'' keyword of 'background-repeat'
 		<li>'corner-shape'
-		<li><<stripes()>> as value for ''border-color'' and its longhands
+		<li><<1d-image>> as value for ''border-color'' and its longhands
 		<li>multiple border colors per border
 		<li>logical border properties
 		<li><a href="#partial-borders">Partial Borders</a> (make part of border shorthand as well!)
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 9e98c67f168..9d382292959 100644
--- a/css-images-4/Overview.bs
+++ b/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>> | <<stripes()>></pre>
+	<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<image()>> | <<image-set()>> | <<cross-fade()>> | <<element()>> | <<gradient>> | <<1d-image>></pre>
 
 	An <<image>> can be used in many CSS properties,
 	including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS2]]
@@ -1910,9 +1910,10 @@ Color Stop “Fixup”</h4>
 	The ''stripes()'' function allows to define a number of stripes of
 	different colors with different widths.
 
-	The syntax for ''stripes()'' is defined as:
+	The syntax for ''1d-image'' and ''stripes()'' is defined as:
 
 	<pre class=prod>
+		<dfn>&lt;1d-image></dfn> = <<stripes()>>
 		<dfn>stripes()</dfn> = stripes( [ <<color>> && [ <<length-percentage>> | <<flex>>]? ]# )
 	</pre>
 
@@ -2501,7 +2502,7 @@ Changes {#changes}
 - Switched color-stop grammar to repeat at end for readability
 - Clarified that object-fit and image-resolution use discrete animation
 - Fixed definition of cross-fade() image blending
-- Added stripes() function and added it to &lt;image> data type
+- Added &lt;1d-image> data type and stripes() function and added &1d-image> to &lt;image> data type
 - Moved interpolation of images from [[css3-images]]
 - Clarifed that cross-fade() takes 1+ arguments. Defined sizing and painting of the new function arguments in detail.
 - Moved cross-fade() from [[css3-images]]
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 446b44e2cb2..1e7cdd182bf 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -287,14 +287,14 @@ Animation type: by computed value
 
 <pre class="propdef">
 Name: outline-color
-Value: [ <<color>> || <<stripes()>> ] | invert
+Value: [ <<color>> || <<1d-image>> ] | invert
 Initial: invert
 Applies to: all elements
 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]].
- <<stripes()>> values are computed as defined in their definition.
+ <<1d-image>> values are computed as defined in their definition.
 Animation type: by computed value
 </pre>
 
@@ -2550,7 +2550,7 @@ the following normative changes have been made:
 		(Support for the broader <<image>> type remains allowed but optional.)
 
 	<li>
-		Added <<stripes()>> as value for the 'outline-color' property.
+		Added <<1d-image>> as value for the 'outline-color' property.
 </ul>
 
 <h3 id=changes-24-1-2020 class=no-num>Changes from the

From 1f982db53e0386f21f986fa898cca8585d70a562 Mon Sep 17 00:00:00 2001
From: Tab Atkins Jr <jackalmage@gmail.com>
Date: Wed, 20 Apr 2022 14:54:42 -0700
Subject: [PATCH 08/13] tweak/rearrange stripes() text; add sum<1 behavior

---
 css-images-4/Overview.bs | 97 +++++++++++++++++++++++++++++-----------
 1 file changed, 72 insertions(+), 25 deletions(-)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 9d382292959..80f70a001fa 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1907,36 +1907,83 @@ Color Stop “Fixup”</h4>
 1D Image Values: the ''stripes()'' notation {#stripes}
 ======================================================
 
-	The ''stripes()'' function allows to define a number of stripes of
-	different colors with different widths.
-
-	The syntax for ''1d-image'' and ''stripes()'' is defined as:
+	While most <<image>> values represent a 2-dimensional image,
+	and <<color>> can be thought of as a "0-dimensional" image
+	(unvarying in either axis),
+	there are some contexts where a 1-dimensional image makes sense,
+	specifying colors along a <dfn export>paint line</dfn>
+	without defining a <em>direction</em> for the line.
+	The <<1d-image>> type represents such images.
+	
+	Some contexts will define how they use the <<1d-image>> as a 1-dimensional value;
+	for example, in 'border-color',
+	the given colors paint "outwards" from each side of the border.
+	When used generically as an <<image>>, a <<1d-image>> is painted identically to a ''linear-gradient(to bottom, ...)''
+	using the [=paint line=] as its [=gradient line=].
 
 	<pre class=prod>
 		<dfn>&lt;1d-image></dfn> = <<stripes()>>
 		<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.
-
-	The computed value of this function is the [=specified value=] with all
-	<<color>>s computed '1fr' values removed.
+	
+	The ''stripes()'' function defines a 1d-image
+	as a number of colored stripes with different widths.
+	
+	Each comma-separated entry defines a solid-color stripe,
+	each placed end-to-end on the [=paint line=] in the order given,
+	with the specified <<color>> and thickness.
+	If the thickness is omitted,
+	it defaults to ''1fr''.
+	
+	In each entry, a <<percentage>> is relative to the |painting area|
+	and must be between ''0%'' and ''100%'' inclusive
+	or else the function is invalid.
+	A <<flex>> is evaluated as a fraction of the |painting area|
+	relative to the total sum of <<flex>> entries in the function,
+	after subtracting the thickness of any non-<<flex>> entries
+	(flooring the subtraction result at zero).
+	If the sum of <<flex>> values is less than 1fr,
+	the result of the subtraction is multiplied by the sum's value
+	before being distributed.
+	
+	<div class=example>
+		For example, 
+		''stripes(red 1fr, green 2fr, blue 100px)``
+		with a |painting area| of ''400px''
+		will result in a 100px red stripe and 200px green stripe,
+		giving red 1 share and green 2 shares of the 300px remaining
+		after subtracting blue's 100px from the 400px total.
+		
+		On the other hand,
+		''stripes(red .1fr, green .2fr, blue 100px)``
+		with a |painting area| of ''400px''
+		will instead give a 30px red stripe and 60px green stripe,
+		followed by 100px of blue and then 210px of transparent.
+		The 300px of leftover space is multiplied by .3,
+		the value of the sum of the <<flex>> values,
+		to obtain only 90px,
+		which is then distributed in the 1:2 ratio
+		the <<flex>> values would dictate.
+		
+		(This is similar to how [=flex layout=] deals with small <<flex>> sums on a line,
+		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=] 
+	with all <<color>>s computed
+	and all <<length-percentage>>s absolutized and computed to the extent possible.
 
 <!--
  ██████  ████ ████████ ████ ██    ██  ██████

From 303dc90b314cf682ff4868ee7643e2312422f085 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 27 Apr 2022 22:27:20 +0200
Subject: [PATCH 09/13] Removed <1d-image> from <image>

This was resolved on in https://github.com/w3c/csswg-drafts/issues/2532#issuecomment-1111207894.
---
 css-images-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 80f70a001fa..5dc8c24471b 100644
--- a/css-images-4/Overview.bs
+++ b/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>> | <<1d-image>></pre>
+	<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<image()>> | <<image-set()>> | <<cross-fade()>> | <<element()>> | <<gradient>></pre>
 
 	An <<image>> can be used in many CSS properties,
 	including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS2]]

From a49e0a28adc066aadd27b72d3740444ab925af9d Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 27 Apr 2022 22:29:30 +0200
Subject: [PATCH 10/13] Made <color> and <1d-image> exclusive alternatives

---
 css-backgrounds-4/Overview.bs | 4 ++--
 css-ui-4/Overview.bs          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index a67bde4bfe0..d34f29f9851 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -185,7 +185,7 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class=propdef>
 	Name: border-top-color, border-right-color, border-bottom-color, border-left-color
-	Value: <<color>> || <<1d-image>>
+	Value: <<color>> | <<1d-image>>
 	Initial: currentcolor
 	Applies to: all elements
 	Inherited: no
@@ -196,7 +196,7 @@ Painting Area: the 'background-clip' property</h3>
 
 	<pre class="propdef shorthand">
 	Name: border-color
-	Value: [ <<color>> || <<1d-image>> ]{1,4}
+	Value: [ <<color>> | <<1d-image>> ]{1,4}
 	</pre>
 
 	These properties set the foreground color of the border specified
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 1e7cdd182bf..a0d694c401c 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -287,7 +287,7 @@ Animation type: by computed value
 
 <pre class="propdef">
 Name: outline-color
-Value: [ <<color>> || <<1d-image>> ] | invert
+Value: [ <<color>> | <<1d-image>> ] | invert
 Initial: invert
 Applies to: all elements
 Inherited: no

From 1b610f768b573f16ba72746779ad40a6c51afbd9 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Wed, 4 May 2022 00:13:14 +0200
Subject: [PATCH 11/13] Incorporated fantasai's comments on stripes() and
 `<1d-image>

---
 css-backgrounds-4/Overview.bs | 19 ++++------------
 css-images-4/Overview.bs      | 43 +++++++++++++++++++++++++++++++----
 css-ui-4/Overview.bs          |  4 ++--
 3 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index d34f29f9851..2e718e65960 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/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>
 
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 5dc8c24471b..9e43d0525eb 100644
--- a/css-images-4/Overview.bs
+++ b/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.
+
 <!--
  ██████  ████████ ████████  ████    ███    ██       ████ ████████    ███    ████████ ████  ███████  ██    ██
 ██    ██ ██       ██     ██  ██    ██ ██   ██        ██       ██    ██ ██      ██     ██  ██     ██ ███   ██
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index a0d694c401c..8958a027ffc 100644
--- a/css-ui-4/Overview.bs
+++ b/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.

From eb59c8725b16706aa79fe2e746c4706739a2f211 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Sun, 9 Oct 2022 21:31:28 +0200
Subject: [PATCH 12/13] [css-ui-4] Fixed links to other specs in outline-color
 definition

---
 css-ui-4/Overview.bs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 8958a027ffc..97a9a126e77 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -293,8 +293,8 @@ Applies to: all elements
 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]].
- For <<1d-image>> values, see [[!CSS-IMAGES-4#stripes]] in [[!CSS-IMAGES-4]].
+ For <<color>> values, see [[css-color-4#resolving-color-values]] in [[!CSS-COLOR-4]].
+ For <<1d-image>> values, see [[css-images-4#stripes]] in [[!CSS-IMAGES-4]].
 Animation type: by computed value
 </pre>
 

From d316d163dd86e188b6601e3c8a27bbe87a22e203 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Fri, 28 Oct 2022 23:51:19 +0200
Subject: [PATCH 13/13] Removed left over paragraph describing <1d-image> in
 <image>

---
 css-images-4/Overview.bs | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 9e43d0525eb..b351c78b220 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1915,12 +1915,6 @@ Color Stop “Fixup”</h4>
 	without defining a <em>direction</em> for the line.
 	The <<1d-image>> type represents such images.
 	
-	Some contexts will define how they use the <<1d-image>> as a 1-dimensional value;
-	for example, in 'border-color',
-	the given colors paint "outwards" from each side of the border.
-	When used generically as an <<image>>, a <<1d-image>> is painted identically to a ''linear-gradient(to bottom, ...)''
-	using the [=paint line=] as its [=gradient line=].
-
 	<pre class=prod>
 		<dfn>&lt;1d-image></dfn> = <<stripes()>>
 		<dfn>stripes()</dfn> = stripes( <<color-stripe>># )