Re: [csswg-drafts] [css-images-4] Allow stripes to be used as gradients (#7244)

A color stop has a color and 0-2 length-percentages.

Here it seems that you are using `100px` as the size of the stripes, and let them be auto placed between the adjacent color stops. But what if the author want to control the position of the stripes?

I tend to think it's more consistent to just keep using 0-2 length-percentages for the position, instead of the size.

The behavior could be that `stripes()` produces 2 color stops (start and end positions of the stripes), and the area inside is painted with the stripes. Then,
 - Specifying 2 length-percentages sets the position of 1st color stop to the 1st value, and the position of the 2nd color stop to the 2nd value. The size of the strips is the difference of the positions.
 - Specifying 1 length-percentage sets both color stops to that same position, collapsing the stripes to 0 size. Only the 1st and last colors will matter.
 - Specifying 0 length-percentages resolves the 2 color stops as per https://drafts.csswg.org/css-images-4/#color-stop-fixup.

```css
linear-gradient(90deg, stripes(magenta, yellow, lime));
linear-gradient(90deg, stripes(magenta, yellow, lime) 0% 100%);
linear-gradient(90deg, magenta 33.33%, yellow 33.33% 66.66%, lime 66.66%);
```
![](https://github.com/w3c/csswg-drafts/assets/7477678/f21a79ae-1d88-44ea-b52e-29469bebd076)

```css
linear-gradient(90deg, black, stripes(magenta, yellow, lime), black);
linear-gradient(90deg, black, stripes(magenta, yellow, lime) 33.33% 66.66%, black);
linear-gradient(90deg, black, magenta 33.33% 44.44%, yellow 44.44% 55.55%, lime 55.55% 66.66%, black);
```
![](https://github.com/w3c/csswg-drafts/assets/7477678/6f28894d-411d-43fd-bdfc-7d4b1a194364)

```css
linear-gradient(90deg, black, stripes(magenta, yellow, lime) 50%, black);
linear-gradient(90deg, black, stripes(magenta, lime) 50%, black);
linear-gradient(90deg, black, stripes(magenta, lime) 50% 50%, black);
linear-gradient(90deg, black, magenta 50%, lime 50%, black);
```
![](https://github.com/w3c/csswg-drafts/assets/7477678/170e2d3c-f331-48c6-bd44-c22981075aa3)

-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7244#issuecomment-1694572503 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 27 August 2023 05:14:31 UTC