Merge pull request #7029 from SebastianZ/stripes-function

[css-images-4][css-backgrounds-4] Added stripes() function

The definition of 1-dimensional images was added together with a `stripes()` function. This function is then used for `border-*-color` and `outline-color` to allow multi-color borders and outlines.

Author: SebastianZ

css-backgrounds-4/Overview.bs

@@ -185,30 +185,28 @@ 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>> | <<1d-image>>
 	Initial: currentcolor
 	Applies to: all elements
 	Inherited: no
 	Percentages: n/a
-	Computed Value: the computed color
+	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>>#{1,4}
+	Value: [ <<color>> | <<1d-image>> ]{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.
 
-	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.
+	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.
 
 	'border-color' is a shorthand for the four 'border-*-color' properties.
 	The four values set the top, right, bottom and left border, respectively.
@@ -223,7 +221,7 @@ Painting Area: the 'background-clip' property</h3>
 		<pre class=lang-css>
 		.foo {
 			border: 30px solid;
-			border-color: skyblue orange yellowgreen indianred, black yellow;
+			border-color: stripes(skyblue, black) stripes(orange, yellow) stripes(yellowgreen, black) stripes(indianred, yellow);
 		}
 		</pre>
 
@@ -702,6 +700,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><<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!)

css-images-4/Overview.bs

@@ -1116,9 +1116,6 @@ Cycle Detection</h4>
 	If the graph contains a cycle,
 	any ''element()'' functions participating in the cycle are <a>invalid images</a>.
 
-
-
-
 <!--
  ██████   ████████     ███    ████████  ████ ████████ ██    ██ ████████  ██████
 ██    ██  ██     ██   ██ ██   ██     ██  ██  ██       ███   ██    ██    ██    ██
@@ -1897,15 +1894,90 @@ 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.
+	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.
+	
+	<pre class=prod>
+		<dfn>&lt;1d-image></dfn> = <<stripes()>>
+		<dfn>stripes()</dfn> = stripes( <<color-stripe>># )
+		<dfn>&lt;color-stripe></dfn> = <<color>> && [ <<length-percentage>> | <<flex>> ]?
+	</pre>
+	
+	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.
 
 <!--
  ██████  ████ ████████ ████ ██    ██  ██████
@@ -2393,6 +2465,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.
+
 <!--
  ██████  ████████ ████████  ████    ███    ██       ████ ████████    ███    ████████ ████  ███████  ██    ██
 ██    ██ ██       ██     ██  ██    ██ ██   ██        ██       ██    ██ ██      ██     ██  ██     ██ ███   ██
@@ -2471,7 +2576,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 &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]]

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>> | <<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]].
+ 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>
 
@@ -752,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.
@@ -2541,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 <<1d-image>> as value for the 'outline-color' property.
 </ul>
 
 <h3 id=changes-24-1-2020 class=no-num>Changes from the