diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 3ac58c93d78..2e718e65960 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -185,30 +185,28 @@ Painting Area: the 'background-clip' property
Name: border-top-color, border-right-color, border-bottom-color, border-left-color
- Value: <>#
+ Value: <> | <<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
Name: border-color
- Value: <>#{1,4}
+ Value: [ <> | <<1d-image>> ]{1,4}
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 color.
- 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
.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);
}
@@ -702,6 +700,7 @@ Additions Since Level 3
logical 'background-position' values (''background-position/start'', ''background-position/end'')
the ''extend'' keyword of 'background-repeat'
'corner-shape'
+ <<1d-image>> as value for ''border-color'' and its longhands
multiple border colors per border
logical border properties
Partial Borders (make part of border shorthand as well!)
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 5b3d12f7998..b351c78b220 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1116,9 +1116,6 @@ Cycle Detection
If the graph contains a cycle,
any ''element()'' functions participating in the cycle are invalid images.
-
-
-
1D Image Values: the ''stripes()'' notation {#stripes}
======================================================
- Issue: Per WG resolution,
- define the ''stripes()'' function
- which creates a 1D image for use in borders/outlines.
+ While most <> values represent a 2-dimensional image,
+ and <> 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 paint line
+ without defining a direction for the line.
+ The <<1d-image>> type represents such images.
+
+
+ <1d-image> = <>
+ stripes() = stripes( <># )
+ <color-stripe> = <> && [ <> | <> ]?
+
+
+ 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 <> and thickness.
+ If the thickness is omitted,
+ it defaults to ''1fr''.
+
+ In each entry, a <> is relative to the |painting area|
+ and must be between ''0%'' and ''100%'' inclusive
+ or else the function is invalid.
+ A <> is evaluated as a fraction of the |painting area|
+ relative to the total sum of <> entries in the function,
+ after subtracting the thickness of any non-<> entries
+ (flooring the subtraction result at zero).
+ If the sum of <> values is less than 1fr,
+ the result of the subtraction is multiplied by the sum's value
+ before being distributed.
+
+
+ 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 <> values,
+ to obtain only 90px,
+ which is then distributed in the 1:2 ratio
+ the <> values would dictate.
+
+ (This is similar to how [=flex layout=] deals with small <> sums on a line,
+ and ensures smoothly continuous behavior
+ as the <> values approach zero.)
+
+
+ The |painting area| is defined by the context in which the ''stripes()'' function is used.
+ If used generically as an <>,
+ 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 <>s computed
+ and all <>s absolutized and computed to the extent possible.